Bootstrap CSS フォーム・リファレンス

❮ 前章へ 次のリファレンス ❯

Bootstrap のデフォルト設定

個々のフォーム・コントロールは、自動的に Bootstrap の持ついくつかのグローバルなスタイルを受け取ります。

class="form-control" を持つ全てのテキスト <input>、<textarea> および <select> 要素は、 デフォルトで width: 100%; に設定されています。

Bootstrap フォームの標準ルール:

次の例では、2 つの入力フィールドと 1 つチェックボックスと送信ボタンを持つ単純な Bootstrap フォームを作成します:

Bootstrap Form Example

<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> クラス

クラス 説明
.form-inline インラインブロック・コントロールで左揃えの <form> を作る (これは、少なくとも幅が 768px であるビューポート内のフォームだけに適用される) Try it
.form-horizontal 横型レイアウトにラベルとフォーム・コントロールのグループの位置を揃える Try it

❮ 前章へ 次のリファレンス ❯