Bootstrap'sデフォルト設定
フォームコントロールは、自動的にいくつかのグローバルなスタイリングを受け取るBootstrap ：
すべてのテキスト<input> <textarea>および<select>クラスを持つ要素.form-control 100％の幅を有します。
Bootstrapフォームのレイアウト
Bootstrap 、フォームのレイアウトの3種類が用意されています。
- 垂直フォーム（これがデフォルトです）
- 水平フォーム
- インラインフォーム
すべての3つのフォームのレイアウトのための標準的な規則：
- 常に使用する
<form role="form">スクリーンリーダーを使っている人のアクセシビリティを向上させることができます） - ラベルとフォームコントロールをラップ
<div class="form-group">最適な間隔のために必要） - クラスの追加
.form-controlすべてのテキストに<input>、<textarea>および<select>要素を
Bootstrap垂直フォーム（デフォルト）
次の例では、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> »それを自分で試してみてください Bootstrapインラインフォーム
インライン形態では、すべての要素は、左揃えインラインで、ラベルが並んでいます。
注：これはのみ内のフォームに適用されviewports 、少なくとも768px幅であります！
インラインフォームのための追加ルール：
- クラスの追加
.form-inlineに<form>要素
次の例では、2つの入力フィールド、1チェックボックスでインラインフォームを作成し、1は、送信ボタンを：
例
<form class="form-inline" 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> »それを自分で試してみてください ヒント：あなたはすべての入力のためのラベルが含まれていない場合は、スクリーン・リーダーは、あなたのフォームに問題があります。 あなたが使用することにより、スクリーンリーダーを除いて、すべてのデバイスのラベルを非表示にすることができます.sr-onlyクラス：
例
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
class="sr-only"
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> »それを自分で試してみてください Bootstrap水平フォーム
水平方向のフォームは他のフォームの両方から、マークアップの量で、フォームのプレゼンテーションに離れて立っています。
水平方向のフォームのための追加のルール：
- クラスの追加
.form-horizontalする<form>要素 - クラスの追加
.control-labelすべてに<label>要素
ヒント：使用して Bootstrap's水平レイアウトでフォームコントロールのラベルとグループを整列する所定のグリッドクラス。
次の例では、2つの入力フィールド、1チェックボックスで水平フォームを作成し、1は、送信ボタンを：
例
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="control-label
col-sm-2" for="email">Email:</label>
<div
class="col-sm-10">
<input type="email"
class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input
type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div
class="form-group">
<div class="col-sm-offset-2
col-sm-10">
<button type="submit" class="btn
btn-default">Submit</button>
</div>
</div>
</form> »それを自分で試してみてください