Bootstrap5 レイアウト

 

Bootstrap5 レイアウト

Bootstrap5では、フォームを効率的に構築し、スタイリングするための柔軟なレイアウトオプションが提供されています。この記事では、提供される主なレイアウトオプションと、それらをプロジェクトに実装する方法について説明します。

フォームの基本構造

Bootstrapのフォームは、いくつかの基本的なHTML要素とクラスを使用して構築されます。標準的なフォームの構造は以下のようになります。


<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">メールアドレスは公開されません。</div>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

上記のコード例では、以下の要素とクラスが使用されています。

  • <form>: フォーム全体を囲む要素。
  • <div class="mb-3">: 各フォームグループを囲み、マージンを追加する要素。
  • <label>: フォームコントロールの説明を表示する要素。
  • <input>: テキスト入力フィールドを表す要素。
  • <button>: フォーム送信ボタンを表す要素。

レイアウトオプション

1. スタック型レイアウト

スタック型レイアウトは、すべてのフォームコントロールとラベルが垂直に積み重ねられた最も基本的なフォームレイアウトです。これは、.form-labelクラスをラベルに使用し、.form-controlクラスをフォームコントロールに使用することで実現できます。上記の「フォームの基本構造」のコード例は、スタック型レイアウトの例です。

2. 水平方向のフォーム

水平方向のフォームは、ラベルとフォームコントロールを同じ行に配置します。これを実現するには、.rowクラスを使用してフォームを複数の行に分割し、.col-*-*クラスを使用して各行の列幅を指定します。ラベルには.col-form-labelクラスを使用します。


<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

その他のレイアウトオプション

Bootstrap5では、上記以外にも様々なレイアウトオプションが提供されています。詳細については、公式ドキュメントを参照してください。

まとめ

Bootstrap5は、様々なフォームレイアウトオプションを提供することで、フォームのデザインと実装を簡素化します。この記事で紹介したレイアウトオプションは、Bootstrap5で提供される多くのオプションの一部にすぎません。ニーズに最適なレイアウトを見つけるには、公式ドキュメントを参照し、様々なオプションを試してみることをお勧めします。

QA

質問 回答
スタック型レイアウトと水平方向のフォームのどちらを使用する方が良いですか？ フォームの複雑さや画面サイズなどの要因によって異なります。スタック型レイアウトはシンプルでモバイルデバイスに適していますが、水平方向のフォームはよりコンパクトで多くの情報を表示できます。
Bootstrap5のフォームでカスタムCSSを使用できますか？ はい、Bootstrap5のクラスと組み合わせて、またはBootstrapのスタイルをオーバーライドするためにカスタムCSSを使用できます。
Bootstrap5のフォームで使用できるJavaScriptプラグインはありますか？ はい、フォームの検証、自動補完、マスク入力などの機能を提供するJavaScriptプラグインが多数あります。

その他の参考記事:Bootstrap ビジュアルレイアウト