Bootstrapを使用して簡単な問い合わせフォームを作る
Bootstrapを使用して簡単な問い合わせフォームを作る
Bootstrapを使用するとCSSの記述をほぼすることなく、問い合わせフォームを作ることが出来ました！（送信ボタンは機能しませんのでご注意ください）
See the Pen JjjvWQL by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
使用したもの
card
これを使用することで、ぐるっとフォームをイマドキなborderで囲ってくれます。
bg-dark text-light
暗い背景＋白文字がこれだけでできちゃう。すごい。
row,col
rowの中にcolを入れることで、
姓名は同じ行、メールアドレスは次の行…のように指定してあげることが出来ます。
また、姓と名はcol-4、メールアドレスはcol-8とすることで合計値が８になるので幅がキレイに揃っています。
form-control
これを入力フォームに渡すことで、入力状態のときにふわっと周りを青く囲ってくれます。わかりやすい…！
btn btn-outline-dark float-right w-25
ボタンにはこれを記述するだけで、
ボタンの見た目、右寄せ、サイズを指定しています。
試していただけるとわかるのですが、マウスオーバーでポインタの形が変わったり背景色が自然に変わっています。
これを記述するのはCSSだと地味にボリュームがあるので、かなり便利だと思います。
