個々のフォーム・コントロールは、自動的に 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 |