今回はコンポーネントとして使うデザインパーツ（コンポーネント）を紹介します。
デザインパーツとは
デザインパーツを紹介する前に，デザインパーツを「そのまま使うこと」の意味を考えてみましょう。
前回紹介した基本スタイルは尖った指定などはなく，比較的どんなサイトでも無難に使えるデザインです。
これから紹介するタブやぺージング，ナビゲーション，ジャンボトロン，メニューなどのデザインパーツはclassを指定するだけで簡単に使えるパワフルなコンポーネントであり，その分Bootstrapらしさを演出するパーツになっています。
しかしながら，CSSやLESSを書かずに，つまりデザインをせず，すべてBootstrap任せてしまえば，どうしても，同じ見た目になってしまいます。特に画像・写真等のビジュアル要素が少ないテキストベースのサイトではより顕著に現れるでしょう。そのため，サイトを制作する上で要件・納期を考慮し何処を「オリジナル」にするか，またはどこを「カスタマイズ」するか？をあらかじめ念頭にいれるようにしましょう。
デザインパーツの利用方法
デザインパーツを使うにあたって、デザインパーツの中には別途，JavaScriptライブラリ（bootstrap.min.js）とjQueryを用意する必要がある場合があります。その時には，jQuery→bootstrap.min.jsという順番で読み込むようにしましょう。
新しくなったグラフィックアイコン
Bootstrap2まではCSSスプライトを利用したラスタベースのアイコンでしたが，Bootstrap3のアイコンはWebフォントを採用することでベクターベースになりました。それにより，任意のサイズに拡大したり，Retinaディスプレイ等で表示しても劣化のない鮮明なビジュアルが得られるようになりました。
さらにフォントであるため，白・黒の二択ではなく，デザインに合わせてcolorプロパティで自由に配色を設定できます。
自由度が広がったため，従来通りボタンに使う以外にもデザインのアクセントに利用するなど，用途はアイデア次第で広がります。
使い方は，空のspanタグにglyphiconというclassと，表示させたいグラフィックアイコンのclassをつけることで，利用できます。
<span class="glyphicon glyphicon-[アイテム名]"></span>グラフィックアイコンのclassは，公式サイトにグラフィックアイコンとclassを記載したリストがあります。
Glyphicons
ドロップダウンメニュー
開閉可能なドロップダウンメニューを作ります。Bootstrapのドロップダウンプラグインが導入されている必要があります。bootstrap.min.jsに含まれているため，jQueryとbootstrap.min.jsが正常にセットアップされていれば動きます。以下すべてのJavaScirptライブラリが読み込まれていることを前提に解説します。
この開閉可能なドロップダウンメニューは，次のように書いていきます。
1. 外箱の用意
まずドロップダウンメニューを作るにはdropdownというclassを指定したdiv要素を作ります。その中に必要な要素を入れて入れることでドロップダウンを構築します。
この要素にopenというclassがついたり消えたりすることでドロップダウン開閉のギミックが成り立ちます。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
ドロップダウンメニュ
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">新規ファイル</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">保存</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">共有</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">削除</a></li>
</ul>
</div>
2. ボタンの用意
次にドロップダウンを発動させるためのボタンを用意します。
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
ドロップダウンメニュー
<span class="caret"></span><!--←「▼」マークを表示する-->このコードで重要な属性はdata-toggle属性とdropdown値です。この属性のついた要素をクリックすると，ドロップダウンの開閉が行われます（注1）。なお，button要素でなくa要素など，他の要素でも構いません。
- 注1
- bootstrap.min.jsによりHTML5の独自データ属性を利用して，JavaScriptで特別な記述無しにインタラクティブな機能 を提供する, Data APIが提供されます。そのためJavaScriptに明るくないデザイナーの強い味方になります。また，jQueryプラグインとして組み込まれますの で，各イベントにフックすることも可能です。これにより，動的に内容を書き換えたり，様々な拡張もjQueryでできます。詳細はJavaScriptを紹介する回で説明します。
3. ドロップダウンメニューの中身を作る
ドロップダウンメニューの本体をul要素で記述します。dividerというclassを指定した空li要素を入れることで区切り線を作ることができます。
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">新規ファイル</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">保存</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">共有</a></li>
<li role="presentation" class="divider"></li><!--←区切り線を意味する空要素-->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">削除</a></li>
</ul>ドロップダウン項目にタイトルをつける
ドロップダウンメニューにタイトルをつけることができます。li要素のclassにdropdown-headerを指定します。
<li role="presentation" class="dropdown-header">ファイル操作</li>
ボタングループ
ボタンを束ねて表示することができます。使い方は簡単で，ボタンをbtn-groupというclassを指定したdiv要素でラップするだけです。
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中央</button>
<button type="button" class="btn btn-default">左</button>
</div>
ボタンツールバー
前項で取り上げたボタングループをさらに束ねることで，ツールーバー状にできます。こちらも使い方は簡単で，ボタングループをラップしているdiv要素群に対して，btn-toolbarというclassを指定したdiv要素でさらにラップするだけです。
<div class="btn-toolbar" role="toolbar">
<div class="btn-group"> ... </div>
<div class="btn-group"> ... </div>
<div class="btn-group"> ... </div>
</div>
ボタンググループのサイズ
ボタングループもボタン同様に4種類のサイズが用意されています。btn-groupというclassに追加して，次のclassを指定することで利用できます。
| class | 説明 |
|---|---|
| btn-group-lg | 大きいサイズ |
| 追加指定無し | 通常のサイズ |
| btn-group-sm | 小さめのサイズ |
| btn-group-xs | 凄く小さいサイズ |
次のように書くことができます。
<div class="btn-group btn-group-lg"> ... </div>
<div class="btn-group"> ... </div>
<div class="btn-group btn-group-sm"> ... </div>
<div class="btn-group btn-group-xs"> ... </div>
ボタングループにドロップダウンメニューをネストする
ボタングループにドロップダウンメニューをネストすることができます。その際記述が変則的になるため，注意が必要です。
<div class="btn-group">
<button type="button" class="btn btn-default">壱</button>
<button type="button" class="btn btn-default">弐</button>
<div class="btn-group">
<button type="button" class="btn btn-default 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>
ボタングループにドロップダウンメニューをネストする際にはラップするdiv要素にdropdownではなく，btn-groupというclassを指定します。ここだけ変則的になりますので注意が必要です。
縦並びのボタングループ
ボタングループはボタンを縦並びにして纏めることもできます。こちらの使用方法も簡単で，btn-groupと指定していたclassの代わりにbtn-group-verticalを指定するだけです。
<div class="btn-group-vertical">
：
</div>
ジャストフィットボタングループ
親要素の横幅一杯に広がるタイプのボタングループを作ることもできます。btn-groupを指定した要素にbtn-group-justifiedというclassを追加して使います。しかし，a要素とbutton要素でマークアップ方法に差異があり，注意が必要です。
a要素の場合はラップする親要素にbtn-group-justifiedを追加するだけです。
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">い</a>
<a href="#" class="btn btn-default">ろ</a>
<a href="#" class="btn btn-default">は</a>
</div>
しかし，button要素の場合は個別のbutton要素に対してbtn-groupでラップした上で，btn-group-justifiedを使う必要があります。
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">い</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">ろ</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">は</button>
</div>
</div>