Bootstrap'sデフォルト設定
個々のフォームコントロールは自動的にいくつかのグローバルなスタイリングを受けるBootstrap 。
すべてのテキスト<input>, <textarea>および<select>持つ要素class="form-control"幅に設定されている：100％; デフォルトでは。
以下のための標準ルールBootstrapフォーム：
- 追加role="form"に<form>要素（スクリーンリーダーを使っている人のアクセシビリティを向上させることができます）
- ラベルとフォームコントロールをラップ<div>を持つ要素class="form-group" （最適な間隔のために必要）
- 追加class="form-control"すべてのテキストに<input>, <textarea>および<select>要素を
次の例では、単純なブートストラップ2の入力フィールドを持つフォーム、1チェックボックス、および送信ボタンを作成します。
ブートストラップフォーム例
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> »それを自分で試してみてください <form>クラス
| クラス | 説明 | 例 |
|---|---|---|
| .form-inline | 作り<form>左揃え（これはのみ内のフォームに適用され、インラインブロックコントロールでviewports少なくとも768px幅です） | それを試してみてください |
| .form-horizontal | 水平レイアウトのラベルとフォーム・コントロールのグループを揃え | それを試してみてください |