ブートストラップフォーム

ブートストラップのデフォルト設定

フォームコントロールは、Bootstrapを使用してグローバルなスタイルを自動的に受け取ります。

クラスを持つすべてのテキスト、、、<input>および<textarea>要素 の幅は100％です。<select>.form-control

ブートストラップフォームのレイアウト

Bootstrapは、次の3種類のフォームレイアウトを提供します。

• 垂直形式（これがデフォルトです）
• 横型
• インラインフォーム

3つのフォームレイアウトすべての標準ルール：

• ラベルとフォームコントロールをラップします<div class="form-group">（最適な間隔に必要）
• .form-controlすべてのテキスト、、、<input>および<textarea>要素<select>にクラスを追加します

ブートストラップ垂直フォーム（デフォルト）

次の例では、2つの入力フィールド、1つのチェックボックス、および送信ボタンを持つ垂直フォームを作成します。

ブートストラップインラインフォーム

インライン形式では、すべての要素がインラインで左揃えになり、ラベルが並んでいます。

注：これは、少なくとも768px幅のビューポート内のフォームにのみ適用されます。

インラインフォームの追加ルール：

• 要素にクラス.form-inlineを追加します<form>

次の例では、2つの入力フィールド、1つのチェックボックス、および1つの送信ボタンを持つインラインフォームを作成します。

ヒント：すべての入力にラベルを含めないと、スクリーンリーダーでフォームに問題が発生します。.sr-only次のクラスを使用して、スクリーンリーダーを除くすべてのデバイスのラベルを非表示にできます 。

ブートストラップ水平フォーム

水平形式とは、大画面および中画面でラベルが入力フィールド（水平）の横に配置されることを意味します。小さな画面（767px以下）では、垂直形式に変換されます（ラベルは各入力の上に配置されます）。

水平フォームの追加ルール：

• 要素にクラス.form-horizontalを追加します<form>
• .control-labelすべての<label>要素にクラスを追加します

ヒント： Bootstrapの事前定義されたグリッドクラスを使用して、ラベルとフォームコントロールのグループを水平レイアウトに配置します。

次の例では、2つの入力フィールド、1つのチェックボックス、および1つの送信ボタンを持つ水平フォームを作成します。