個々のフォーム・コントロールは、自動的に Bootstrap の持ついくつかのグローバルなスタイルを受け取ります。
class="form-control" を持つ全てのテキスト <input>、<textarea> および <select> 要素は、 デフォルトで width: 100%; に設定されています。
Bootstrap フォームの標準ルール:
<div class="form-group"> 内にラベルとフォームコントールをラップする(最適な間隔のために必要)<input>、<textarea>、
<select> 要素に、クラス .form-control を追加する次の例では、2 つの入力フィールドと 1 つチェックボックスと送信ボタンを持つ単純な Bootstrap フォームを作成します:
<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>
Try it Yourself »
| クラス | 説明 | 例 |
|---|---|---|
| .form-inline | インラインブロック・コントロールで左揃えの <form> を作る (これは、少なくとも幅が 768px であるビューポート内のフォームだけに適用される) | Try it |
| .form-horizontal | 横型レイアウトにラベルとフォーム・コントロールのグループの位置を揃える | Try it |