Bootstrap 組版

Bootstrap タイポグラフィ

説明: この記事では、Bootstrap のグリッドシステムやその他のユーティリティクラスを使用して、フォームレイアウトを作成する方法について説明します。

フォームレイアウト

Bootstrap でフォームレイアウトを作成するための基本原則を紹介します。グリッドシステム、フォームコントロール、ラベルの使用などです。

  • グリッドシステム: フォーム要素の配置とサイズを制御するために、定義済みのグリッドクラスを使用します。
  • フォームコントロール: 入力フィールド、ドロップダウンメニュー、ボタンなど、Bootstrap が提供するフォームコントロールを使用します。
  • ラベル: <label> 要素を使用して、フォームコントロールに明確な説明を提供します。

水平フォーム

水平に配置されたフォームを作成する方法について説明します。

  • グリッドシステムの使用: 特定のグリッドクラスを使用して、ラベルとフォームコントロールを水平に配置します。
  • ラベルとコントロールの配置: .col-form-label クラスを使用して、ラベルをフォームコントロールに揃えます。
  • レスポンシブレイアウト: ブレークポイントを使用して、画面サイズに合わせてフォームレイアウトを調整します。 

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="パスワード">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>
</form>

インラインフォーム

インラインに配置されたフォームを作成する方法について説明します。

  • .row-cols-* クラスの使用: .row-cols-* クラスを使用して、フォーム要素を1行に配置します。
  • インラインフォームコントロール: .form-control-inline クラスを使用して、フォームコントロールをインライン要素に変換します。 

<form class="form-inline">
  <div class="form-group">
    <label for="inputEmailInline" class="sr-only">メールアドレス</label>
    <input type="email" class="form-control mb-2 mr-sm-2" id="inputEmailInline" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="inputPasswordInline" class="sr-only">パスワード</label>
    <input type="password" class="form-control mb-2 mr-sm-2" id="inputPasswordInline" placeholder="パスワード">
  </div>
  <button type="submit" class="btn btn-primary mb-2">サインイン</button>
</form>

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

その他いくつかのフォームレイアウトオプションを紹介します。

  • フォームグループ: .form-group クラスを使用して、関連するフォーム要素をグループ化します。
  • フォームグリッド: .form-row と .form-group クラスを使用して、より複雑なフォームレイアウトを作成します。
  • カスタムフォームコントロール: チェックボックスやラジオボタンなど、Bootstrap のカスタムフォームコントロールを使用します。

参考資料

よくある質問

  1. Q: Bootstrap でレスポンシブなフォームを作成するにはどうすればよいですか？
    A: グリッドシステムのブレークポイントを使用すると、画面サイズに合わせてフォームレイアウトを調整できます。
  2. Q: インラインフォームと水平フォームの違いは何ですか？
    A: インラインフォームは、すべてのフォーム要素が1行に配置されます。水平フォームは、ラベルとフォームコントロールが水平に配置されます。
  3. Q: Bootstrap でカスタムフォームコントロールを作成するにはどうすればよいですか？
    A: Bootstrap のドキュメントに記載されているカスタムフォームコントロールのガイドラインに従ってください。