Bootstrap のレイアウトコンポーネント
この記事では、Bootstrap 5.3 のフォームレイアウト構築に使用されるさまざまなコンポーネントとユーティリティクラスについて説明します。
1. フォームの構築
デフォルトフォーム
標準的なフォームを構築するための基本的な HTML 構造について説明します。 これには、<form>、<label>、<input>、<button> などのタグを使用し、.form-control クラスを使用してフォームコントロールを美しくします。
<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>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">パスワード</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
インラインフォーム
.row と .col-* クラスを使用して水平方向にフォームを作成し、.form-label-inline クラスを使用してラベルと入力ボックスを揃える方法について説明します。
<form class="row g-3">
<div class="col-auto">
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</div>
</form>
2. フォームグリッド
グリッドシステムの使用
Bootstrap のグリッドシステム（.row、.col-*）を利用して、フォーム要素を柔軟にレイアウトする方法について説明します。
<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>
3. 水平フォーム
基本的な使い方
.row、.col-sm-*、.form-label、.col-sm-* などのクラスを使用して水平方向のフォームを作成し、ラベルと入力ボックスの配置方法について説明します。
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
4. インラインフォーム
基本的な使い方
.form-inline クラスを使用して、占有スペースの少ないインラインフォームを作成し、さまざまな画面サイズに合わせて調整する方法について説明します。
<form class="form-inline">
<div class="mb-3 mx-sm-3">
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="mb-3 mx-sm-3">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</form>
5. フローティングラベル
基本的な使い方
.form-floating クラスを使用して、フローティングラベル付きのフォームコントロールを作成します。 ユーザーが入力すると、ラベルは入力ボックスの上に移動します。
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
6. その他のコンポーネント
テキストコンテンツ
フォームで .form-text クラスを使用してヘルプテキストやヒント情報を追加する方法について説明します。
フォームコントロールの無効化
disabled 属性または .disabled クラスを使用してフォームコントロールを無効にする方法について説明します。
読み取り専用フォームコントロール
readonly 属性を使用して、選択およびコピーはできますが編集できない読み取り専用のフォームコントロールを作成する方法について説明します。
参考資料
よくある質問
Q1: Bootstrap のグリッドシステムとは何ですか？
A1: Bootstrap のグリッドシステムは、12 列のグリッドレイアウトを使用して、さまざまな画面サイズに合わせてコンテンツを柔軟に配置できる強力なモバイルファーストのシステムです。
Q2: フローティングラベルとは何ですか？
A2: フローティングラベルは、ユーザーが入力フィールドをクリックまたはフォーカスすると、入力フィールドの上に「浮上」するフォームラベルのデザインパターンです。これにより、フォームの外観がすっきりし、ユーザーエクスペリエンスが向上します。
Q3: フォームを無効にするにはどうすればよいですか？
A3: フォーム全体または個々のフォームコントロールを無効にするには、disabled 属性を使用します。これにより、ユーザーはフォームを送信したり、無効化されたコントロールと対話したりできなくなります。