Twitter Bootstrapのフォーム装飾

今回はTwitter Bootstrapによるフォーム装飾を紹介したいと思います。フォーム以外の装飾については、Twitter BootstrapのCSSによる装飾の方を参照してください。

テキストボックスなど基本的なフォーム部品の装飾

テキストボックス

<input type="text" placeholder="テキスト" />
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

テキストエリア

<textarea>textarea</textarea>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

チェックボックス

<label class="checkbox">
  <input type="checkbox" value="" /> テキスト
</label>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

インラインチェックボックス

<label class="checkbox inline">
  <input type="checkbox" value="" /> テキスト
</label>
<label class="checkbox inline">
  <input type="checkbox" value="" /> テキスト
</label>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

ラジオボタン

<label class="radio">
  <input type="radio" name="radio1" value="" /> テキスト
</label>
<label class="radio">
  <input type="radio" name="radio1" value="" /> テキスト
</label>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

インラインラジオボタン

<label class="radio inline">
  <input type="radio" name="radio1" value="" /> テキスト
</label>
<label class="radio inline">
  <input type="radio" name="radio1" value="" /> テキスト
</label>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

セレクトボックス

<select>
  <option>テキスト</option>
  <option>テキスト</option>
  <option>テキスト</option>
  <option>テキスト</option>
  <option>テキスト</option>
</select>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

セレクトボックス(複数選択)

<select multiple="multiple">
  <option>テキスト</option>
  <option>テキスト</option>
  <option>テキスト</option>
  <option>テキスト</option>
  <option>テキスト</option>
</select>
Bootstrapの基本的なフォーム部品
Bootstrapの基本的なフォーム部品

テキストボックスの両サイドに文字列を表示するにはclass=input-appendclass=input-prependを使います。

class=input-append

<div class="input-prepend">
  <span class="add-on">テキスト</span>
  <input class="span2" type="text" />
</div>
Bootstrapのインプットテキストにテキストを付加
Bootstrapのインプットテキストにテキストを付加

class=input-prepend

<div class="input-append">
  <input class="span2" type="text" />
  <span class="add-on">テキスト</span>
</div>
Bootstrapのインプットテキストにテキストを付加
Bootstrapのインプットテキストにテキストを付加

class=input-appendclass=input-prepend

<div class="input-prepend input-append">
  <span class="add-on">テキスト</span>
  <input class="span2" type="text" />
  <span class="add-on">テキスト</span>
</div>
Bootstrapのインプットテキストにテキストを付加
Bootstrapのインプットテキストにテキストを付加

テキストボックスの前にボタンを表示

<div class="input-prepend">
  <button class="btn" type="button">テキスト</button>
  <input class="span2" type="text" />
</div>
Bootstrapのインプットテキストにボダンを付加
Bootstrapのインプットテキストにボダンを付加

テキストボックスの後ろにボタンを表示

<div class="input-prepend">
  <input class="span2" type="text" />
  <button class="btn" type="button">テキスト</button>
</div>
Bootstrapのインプットテキストにボダンを付加
Bootstrapのインプットテキストにボダンを付加

テキストボックスの後ろにボタンを2つ表示

<div class="input-append">
  <input class="span2" type="text" />
  <button class="btn" type="button">テキスト</button>
  <button class="btn" type="button">テキスト</button>
</div>
Bootstrapのインプットテキストにボダンを付加
Bootstrapのインプットテキストにボダンを付加

前方にドロップダウンを表示

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      テキスト
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">テキスト</a></li>
      <li><a href="#">テキスト</a></li>
    </ul>
  </div>
  <input class="span2" type="text" />
</div>
Bootstrapのインプットテキストにボダンを付加
Bootstrapのインプットテキストにボダンを付加

後方にドロップダウンを表示

<div class="input-append">
  <input class="span2" type="text" />
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      テキスト
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">テキスト</a></li>
      <li><a href="#">テキスト</a></li>
    </ul>
  </div>
</div>
Bootstrapのインプットテキストにボダンを付加
Bootstrapのインプットテキストにボダンを付加

前方と後方に両方にドロップダウンを表示

<div class="input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      テキスト
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">テキスト</a></li>
      <li><a href="#">テキスト</a></li>
    </ul>
  </div>
  <input class="span2" type="text" />
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      テキスト
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">テキスト</a></li>
      <li><a href="#">テキスト</a></li>
    </ul>
  </div>
</div>
Bootstrapのインプットテキストにボダンを付加
Bootstrapのインプットテキストにボダンを付加

フォーム部品のサイズはmini/small/largeなど相対的な方法で指定する方法とspan1/span2/span3などグリッドを使って指定する方法があります。

mini/small/largeなど相対的な方法で指定

<input class="input-mini" type="text" />
<input class="input-small" type="text" />
<input class="input-medium" type="text" />
<input class="input-large" type="text" />
<input class="input-xlarge" type="text" />
<input class="input-xxlarge" type="text" />
Bootstrapのフォームサイズ
Bootstrapのフォームサイズ

span1/span2/span3などグリッドを使って指定 (span1-span12)

<input class="span1" type="text" />
<input class="span2" type="text" />
<input class="span3" type="text" />
<select class="span4"><option>テキスト</option></select>
<select class="span5"><option>テキスト</option></select>
<select class="span6"><option>テキスト</option></select>
Bootstrapのフォームサイズ
Bootstrapのフォームサイズ

ヘルプテキストを使ってテキストボックスの周りにテキストを表示できます。

class=help-inline

<input type="text" />
<span class="help-inline">テキスト</span>
Bootstrapのヘルプテキスト
Bootstrapのヘルプテキスト

class=help-block

<input type="text" />
<span class="help-block">テキスト</span>
Bootstrapのヘルプテキスト
Bootstrapのヘルプテキスト

Twitter BootstrapのCSSによる装飾で紹介したsuccessやwarningなどのクラスがフォームでも使えます。

<div class="control-group success">
  <label class="control-label">テキスト</label>
  <div class="controls">
    <input type="text" />
     <span class="help-inline"></span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label">テキスト</label>
  <div class="controls">
    <input type="text" />
    <span class="help-inline">テキスト</span>
  </div>
</div>

<div class="control-group warning">
  <label class="control-label">テキスト</label>
  <div class="controls">
    <input type="text" />
    <span class="help-inline">テキスト</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label">テキスト</label>
  <div class="controls">
    <input type="text" />
    <span class="help-inline">テキスト</span>
  </div>
</div>
Bootstrapのフォーム状態
Bootstrapのフォーム状態

ボタンを作る場合はclass=btnとします。

デフォルトのボタン

<button class="btn">button</button>
Bootstrapのボタン
Bootstrapのボタン

ボタンのサイズ

&t;button class="btn btn-mini">テキスト</button>
<button class="btn btn-small">テキスト</button>
<button class="btn">テキスト</button>
<button class="btn btn-large">テキスト</button>
<button class="btn btn-block">テキスト</button>
Bootstrapのボタン
Bootstrapのボタン

ボタンスタイル

<button class="btn">テキスト</button>
<button class="btn btn-primary">テキスト</button>
<button class="btn btn-info">テキスト</button>
<button class="btn btn-success">テキスト</button>
<button class="btn btn-warning">テキスト</button>
<button class="btn btn-danger">テキスト</button>
<button class="btn btn-inverse">テキスト</button>
<button class="btn btn-link">テキスト</button>
Bootstrapのボタン
Bootstrapのボタン

無効状態のボタン

<button class="btn disabled">テキスト</button>
Bootstrapのボタン
Bootstrapのボタン

ここまでフォーム部品の表示を紹介してきましたが、class=form-horizontalなどを使ってフォームの配置を変更できます。

水平フォーム

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Username</label>
    <div class="controls">
      <input type="text" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Password</label>
    <div class="controls">
      <input type="password" />
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <button class="btn">Sign in</button>
    </div>
  </div>
</form>
Bootstrapのフォームスタイル
Bootstrapのフォームスタイル

インラインフォーム

<form class="form-inline">
  <label class="control-label">Username</label>
  <input type="text" />
  <label class="control-label">Password</label>
  <input type="password" />
  <button class="btn">Sign in</button>
</form>
Bootstrapのフォームスタイル
Bootstrapのフォームスタイル

最後に検索フォームを紹介します。

<form class="form-search">
  <input type="text" class="span2 search-query" />
  <button class="btn">テキスト</button>
</form>
Bootstrapの検索フォーム
Bootstrapの検索フォーム
<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query" />
    <button class="btn">テキスト</button>
  </div>
</form>
Bootstrapの検索フォーム
Bootstrapの検索フォーム
<form class="form-search">
  <div class="input-prepend">
    <button class="btn">テキスト</button>
    <input type="text" class="span2 search-query" />
  </div>
</form>
Bootstrapの検索フォーム
Bootstrapの検索フォーム