Bootstrap 3.3.7 入力コンポーネント

BootstrapにはHTMLのフォームコントロール以外にも便利なGUIコンポーネントが含まれている。その使い方を説明する。
Tags:

ボタングループ

HTMLには標準の入力部品があるが、それだけでは単調なインターフェースになりやすい。Bootstrapは独自のスタイルやスクリプトを使い、標準HTMLにはないインターフェースを簡単に作れる。

ボタングループは複数のボタンを1本のバーのようにまとめて表示する。

<div class="btn-group">
  <button class="btn">ボタンのテキスト</button>
  <button class="btn btn-default">default</button>
  <button class="btn btn-primary">primary</button>
</div>

ボタンにはbtn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-dangerなどのBootstrapクラスを使える。

ボタンツールバー

ボタンツールバーは、複数のボタングループを1つにまとめるもので、デスクトップアプリのツールバーのような表示に使う。

<div class="btn-toolbar">
  <div class="btn-group">
    <button class="btn btn-default">One</button>
    <button class="btn btn-default">Two</button>
  </div>
  <div class="btn-group">
    <input type="button" class="btn btn-default" value="Three">
  </div>
</div>

<button>や<input type="button">だけでなく、<div>タグでもボタン用クラスを指定すればボタンのように表示できる。

ドロップダウン

ドロップダウンは、ボタンをクリックするとメニューが表示されるインターフェースである。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Number
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li role="presentation"><a href="#">One</a></li>
    <li role="presentation"><a href="#">Two</a></li>
    <li role="presentation"><a href="#">Three</a></li>
  </ul>
</div>

外側にはdropdown、ボタンにはdropdown-toggleとdata-toggle="dropdown"を指定する。メニューはdropdown-menuとrole="menu"を付けた<ul>で作り、各項目は<li role="presentation">内にリンクを書く。

ボタングループ内のドロップダウン

ボタングループと組み合わせる場合は、dropdownではなく入れ子のbtn-groupを使う。

<div class="btn-group">
  <div class="btn btn-default">String</div>
  <div class="btn btn-default">Bool</div>
  <div class="btn-group" role="group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Number <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation"><a href="#">One</a></li>
    </ul>
  </div>
</div>

プログレスバー

プログレスバーは進行状況を横棒で表示するコンポーネントである。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 35%;">
    35%
  </div>
</div>

色指定にはprogress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-dangerなどを使う。progress-bar-stripedを追加すると縞模様になり、activeを追加すると縞模様がアニメーションする。

アイコンとバッジ

Bootstrapには多数のGlyphiconsが含まれている。glyphicon基本クラスと個別アイコンクラスを<span>に指定して表示する。

<span class="glyphicon glyphicon-ok"></span>

利用できるアイコンはBootstrapサイトで確認できる。 http://getbootstrap.com/components/#glyphicons

バッジはテキストの横に付ける小さな表示である。

<span class="badge">Badge</span>