【Bootstrap フォーム、基本編】Bootstrapで簡単にお問い合わせ(フォーム)を作る方法を紹介します

フォームのサムネイル
お問い合わせのフォームが作りたいな

そんな時はBootstrapでサクッと作りましょう。

作り方は簡単で指定のクラスをつけるだけです。


「Bootstrapってなんぞや?」という方はこちらの記事をご覧ください。

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方



Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

フォーム(お問い合わせ)を作りたい

フォームはこんな感じです。

 

See the Pen
vYKMjaw
by hiro web制作とブログ (@hiroweb9)
on CodePen.

※このコードは内部の処理が書いていません。見た目を作っているだけです。内部の処理はPHPの知識が必要です。

コードはこんな感じです。

クラスの意味は以下の通りです。

container幅の設定、レスポンシブデザインに対応しています
my-(0,1,2,3,4,5)y軸方向のマージン 1=0.25rem 1rem=16pxです。
form-groupマージンを下に1rem(16px)とっています
form-controlデフォルトのデザイン(input)を消し、デザインの調整をしている
btnボタンのデフォルトのデザインを消す
btn-outline-primaryボタンのボーダーを青にし、ホバーすると背景が青に変わる

ボタンの色はいくつか種類があります。

btn-(色の指定)で簡単に設定できます。

btn-primary
btn-secondaryグレー
btn-success
btn-warning
btn-info水色
btn-light薄いグレー
btn-dark濃いグレー
btn-white
btn-transparent透明
btn-dangerオレンジ

 

btn-outline-(色の指定)でボーダーがあり、ホバーすると背景の色がボーダーと同じになります。

btn-(色の指定)にすると背景の色が指定した色になります。

またこんなデザインも容易に作れます。

グリッドシステムを使ったフォームデザイン

コードは以下の通りです。

グリッドシステムのクラスの意味をざっくりと紹介します。

row横並びにします
col-4 , col-8col-(数字)数字が足して12になるようにします。数字が大きいほど幅が大きくなります。
col-md-4 , col-md-8mdをつけるとレスポンシブデザインに対応します。ブレイクポイントは768pxです。

グリッドシステムを使っています。グリッドシステムはBootstrapの機能の1つで、よく使われます。

覚えておくととても便利です!

容易にレスポンシブデザインに対応できるのでcssの記述が減ります。

グリッドシステムについてはこちらの記事で詳しく解説しています。

関連記事

グリッドシステムってなんだ?グリッドシステムを詳しく知りたい... 今回はこんな疑問を解消していきます! ティロこんにちは、ティロといいますプログラ[…]

グリッドシステムを詳しく解説します

 

チェックボタンとラジオボタンを作りたい

チェックボタンはこんな感じです。

チェックボタン

 

出典:Forms – Bootstrap 4.1 日本語リファレンス

クラス等の意味は以下の通りです。

form-check位置を調整しています
form-check-input位置を調整しています、input要素につけます。
form-check-label位置を調整しています、label要素につけます。
id=”check1″for=””とid=””は同じにします。文字列は任意です。check1でなくてもforと一致していればOK
for=”check1″for=””とid=””は同じにします。文字列は任意です。
disabled属性、無効化したい場合にinput要素につけます。

次にラジオボタンを作ります。

ラジオボタン

出典:Forms – Bootstrap 4.1 日本語リファレンス

checkedチェック済みとなります

後はラジオボタンと同じです。

いかがでしたでしょうか?

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。