オプションレイアウト … 3

1.検索フォーム

Search form
・<input>要素を丸くするためにクラス付与

<form class="form-search">

  <input type="text" class="input-medium search-query">

  <button type="submit" class="btn">Search</button>

</form>

---

2.インラインフォーム

Inline form
・横一列型(インライン表示)
・コンパクトなレイアウトのために、フォーム要素をインラインブロック表示(display: inline-block;)
・具体的には「form-inline」クラス付与

<form class="form-inline">

  <input type="text" class="input-small" placeholder="Email">

  <input type="password" class="input-small" placeholder="Password">

  <label class="checkbox">

    <input type="checkbox"> Remember me

  </label>

  <button type="submit" class="btn">Sign in</button>

</form>

---

3.水平フォーム

Horizontal form
・横型
・各フォーム要素と同じ行に表示されるよう、「右位置を合わせたラベル」を左側にフロート
・「form-horizontal」「control-group」「control-label」「controls」クラスを付与する必要あり
・通常フォームを作成する場合、このタイプを利用することになる

<form class="form-horizontal">

  <div class="control-group">

    <label class="control-label" for="inputEmail">Email</label>

    <div class="controls">

      <input type="text" id="inputEmail" placeholder="Email">

    </div>

  </div>

  <div class="control-group">

    <label class="control-label" for="inputPassword">Password</label>

    <div class="controls">

      <input type="password" id="inputPassword" placeholder="Password">

    </div>

  </div>

  <div class="control-group">

    <div class="controls">

      <label class="checkbox">

        <input type="checkbox"> Remember me

      </label>

      <button type="submit" class="btn">Sign in</button>

    </div>

  </div>

</form>

<form class="form-horizontal">

	<div class="control-group">

		<label class="control-label">名前</label>

		<div class="controls">

			<input type="text" name="name" class="span3">

		</div>

	</div>

	<div class="control-group success">

		<label class="control-label">メアド</label>

		<div class="controls">

			<input type="text" name="name" class="span4"> <span class="help-inline">形式が正しくありません</span>

		</div>

	</div>

	<div class="control-group">

		<div class="controls">

			<input type="submit" value="送信" class="btn">

		</div>

	</div>

</form>