基本的なフォームのスタイル - Bootstrapのチュートリアル

このレッスンでは基本的な フォームの要素にスタイルを与えます。 今開いているドキュメントのページには フォームの要素がボタンも 含めて４つあります。 これらをそれぞれ Bootstrap の スタイルで設定してみましょう。 フォームがありまして div で要素をそれぞれ囲ってあるんですけど div に対してまず一番上、 メールアドレスですね。 これに対しては class の form-group としましょう。 上から２番目の div 要素も同様に class の form-group です。 div の中の要素に対しても 設定をしていきましょう。 メールアドレスは飛ばして input 要素、 type email となっていますけど ここに class の form-control と設定すると メールアドレスの input 要素が 画面いっぱいに広がりました。 そうしたら今度は次の div ですね。 こちらも input については 同じように class の form-control また input 要素に 幅が広がりました。 次にこの small のテキストですね。 ここにもちょっと設定を しておきましょう。 class で form-text という クラスがあります。 見た目はあまり変わらないですけど ちょっと間隔が変わったというぐらいですね。 少し見た目も変えたいので、今度は これは form のクラスではありませんけど text-muted ということで グレーにします。 次３番目の div ですね。 ここはチェックボックスです。 ですから class は form-check となります。 ちょっと間が空いてしまいましたね。 でも大丈夫です。 この input 要素 checkbox ですね。 これに対してもクラスを与えます。 class の form-check-input そうするとまた間が 元に戻りました。 「私はロボットではありません」 とありますけど これも label に class を与えます。 class の form-check-label です。 テキストは変わらずに ちょっと間隔が変わりましたね。 この間隔はこの後空けましょう。 button 要素の方は これは普通に ボタンの設定にします。 class の btn、…