Bootstrap3 の基本的な使い方(3)

Bootstrap3 の使い方(3)

作成日：2017年7月22日

ドロップダウン

ドロップダウンは、ボタンやリンクなどをクリックした時に、サブメニューを開閉する JavaScript（dropdown.js）を使用した機能です。（Dropdowns）

以下は基本的な使い方です。

ドロップダウンの機能の範囲を div 要素等で囲み、この要素に dropdown クラスを指定
サブメニューを開閉する要素（button 要素や a 要素）に dropdown-toggle クラスと data-toggle="dropdown" 属性を指定
サブメニューの内容（ul 要素等）に dropdown-menu クラスを指定

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true">
    ドロップダウン
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">サブメニュー1</a></li>
    <li><a href="#">サブメニュー2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">サブメニュー3</a></li>
  </ul>
</div>

キャレットの表示（▼）

▼ の表示は、caret クラスを使用します。

区切り線（セパレーター）

divider クラスを指定した li 要素を用意することで、区切り線を表示することができます。また、role 属性（role="separator"）を使用してこの要素の役割を明示しています。

aria-haspopup 属性はポップアップメニューが存在するかどうかを示すための WAI-ARIA の属性で、 true を指定することで UA に対してポップアップが存在することを伝えます。

aria-labelledby 属性は要素とラベルを関連付ける WAI-ARIA 属性で、関連付けたい要素の id 属性を aria-labelledby 属性の値として指定します。（ARIA ラベルと関係性）

Bootstrap のサンプルには記述されていて、ここでは省略していますが、aria-expanded 属性は要素の開閉の状態を示すための WAI-ARIA の属性で、値には true (開いている状態)、false (閉じている状態)を指定できます。この属性はユーザーの操作によって生じる状態を表わすものなので、必要に応じて JavaScript を使って、属性値をその時々で変更します。

ドロップアップ

dropdown クラスの代わりに、dropup クラスを指定すると、開閉する際にサブメニューが上側に表示されます。外側の要素に dropup クラスを指定する以外は、前述の例と同じです。

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"> 
    ドロップアップ 
    <span class="caret"></span> 
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">サブメニュー1</a></li>
    <li><a href="#">サブメニュー2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">サブメニュー3</a></li>
  </ul> 
</div>

以下は、ドロップダウンの機能を利用して、ボタンをクリックすると画像を表示・非表示にする例です。（実用的かどうかは別です）

使い方は、前述と同じです。

ドロップダウンの機能の範囲を div 要素等で囲み dropdown クラスを指定
サブメニューを開閉する要素に dropdown-toggle クラスと data-toggle="dropdown" 属性を指定
サブメニューの内容の要素に dropdown-menu クラスを指定

<div class="dropdown" id="myDD">
  <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"> 
    画像を表示 
  </button>
  <div class="dropdown-menu">
    <img src="images/sample.jpg" class="img-responsive" alt=""> 
  </div>
</div>

画像はレスポンシブにするために、img-responsive クラスを指定しています。また、ボタンの表示を変えるために、以下の jQuery を記述しています。

ドロップダウンのイベントなどについては Dropdown/Events に記載されています。

ドロップダウンのイベントは、dropdown-menu クラスを指定した要素の親要素において発火されます。

jQuery(function($){
  $('#myDD').on('shown.bs.dropdown', function () {
    $(this).find("button").text("画像を隠す");
  })
  $('#myDD').on('hidden.bs.dropdown', function () {
    $(this).find("button").text("画像を表示");
  })
});

画像を表示させてみると、パディングやマージンが設定されていることがわかります。bootstrap.css には以下が記述されています。

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

a 要素を使ったドロップダウン

button 要素ではなく a 要素を使ってサブメニューを開閉する例です。

a 要素に btn と btn-default クラスを指定して、ボタンのように見せかけています。これらのクラスを指定しない場合は、通常のリンクのように表示されます。

また、a 要素に role="button" の role 属性を指定してボタンとしての役割を明示しています。

<div class="dropdown">
  <a class="btn btn-default dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown" role="button" aria-haspopup="true"> 
    ドロップダウン
    <span class="caret"></span> 
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
    <li><a href="#">サブメニュー1</a></li>
    <li><a href="#">サブメニュー2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">サブメニュー3</a></li>
  </ul> 
</div>

メニューにタイトルを表示

ドロップダウンメニューの項目にタイトル（header）を表示するには、リスト項目の要素（li 要素）に dropdown-header クラスを指定します。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true"> 
    ドロップダウン 
    <span class="caret"></span> 
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <li class="dropdown-header">タイトル1</li>
    <li><a href="#">サブメニュー1</a></li>
    <li><a href="#">サブメニュー2</a></li>
    <li class="dropdown-header">タイトル2</li>
    <li><a href="#">サブメニュー3</a></li>
  </ul> 
</div>

リンクの無効化

ドロップダウンメニューの項目を無効化するには、リスト項目の要素（li 要素）に disabled クラスを指定します。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true"> 
    ドロップダウン 
    <span class="caret"></span> 
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <li class="dropdown-header">タイトル1</li>
    <li><a href="#">サブメニュー1</a></li>
    <li><a href="#">サブメニュー2</a></li>
    <li class="dropdown-header">以下は無効な項目</li>
    <li class="disabled"><a href="#">サブメニュー3</a></li>
  </ul> 
</div>

ボタングループ

ボタングループは複数のボタンをグループ化して表示する機能です。ボタングループは、グループ化するボタンを div 要素で囲み、その div 要素に btn-group というクラスを指定します。（Button groups）

基本的なボタングループ

以下は、基本的なボタングループです。グループ化するボタンを div 要素で囲み、btn-group というクラスを指定します。

アクセシビリティのために、role 属性（role="group"）を指定して、ボタンのグループであることを伝えています。

また、aria-label 属性を使ってラベルを付けています。aria-label 属性は要素に対してラベル付けをする WAI-ARIA 属性です。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

bootstrap.css には以下が記述されていて、ボタングループはインラインブロック要素として設定されています。

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}

ボタンツールバー

ボタングループを更にグループ化して、ボタンツールバーを作成することができます。ボタンツールバーを作成するには、ボタングループを div 要素で囲み、その div 要素に btn-toolbar というクラスを指定します。

ボタンツールバーの div 要素にrole 属性（role="btn-toolbar"）を指定しています。

<div class="btn-toolbar" role="toolbar" aria-label="ボタンツールバー">
  <div class="btn-group" role="group" aria-label="ボタングループ1">
    <button type="button" class="btn btn-success">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-warning">3</button>
    <button type="button" class="btn btn-danger">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="ボタングループ2">
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="ボタングループ3">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

ウィンドウ幅を小さくすると、ボタングループが縦方向に隙間なく配置されます。縦に配置されたときに、上下に適当な間隔をあけたい場合は、ボタングループに CSS で margin-bottom を設定するのが簡単な方法です。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar button groups">
  <div class="btn-group" role="group" aria-label="Group1" style="margin-bottom: 10px;">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
    <button type="button" class="btn btn-default">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Group2">
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
    <button type="button" class="btn btn-default">8</button>
  </div>
</div>

サイズの調整

ボタングループのサイズの調整は、個々のボタンに対して指定するのではなく、ボタングループに対して以下のクラスを指定して調整することができます。

btn-group-lg：各ボタンを大サイズで表示
指定なし：各ボタンをデフォルト（通常）のサイズで表示
btn-group-sm：各ボタンを小サイズで表示
btn-group-xs：各ボタンを極小サイズで表示

<div class="btn-group btn-group-lg" role="group" aria-label="Large group">
  <button type="button" class="btn btn-default">Large1</button>
  <button type="button" class="btn btn-default">Large2</button>
  <button type="button" class="btn btn-default">Large3</button>
</div>
<div class="btn-group" role="group" aria-label="Default group">
  <button type="button" class="btn btn-default">Default1</button>
  <button type="button" class="btn btn-default">Default2</button>
  <button type="button" class="btn btn-default">Default3</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small group">
  <button type="button" class="btn btn-default">Small1</button>
  <button type="button" class="btn btn-default">Small2</button>
  <button type="button" class="btn btn-default">Small3</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="ExtraSmall group">
  <button type="button" class="btn btn-default">ExtraSmall1</button>
  <button type="button" class="btn btn-default">ExtraSmall2</button>
  <button type="button" class="btn btn-default">ExtraSmall3</button>
</div>

ネスト（入れ子）

ボタングループを表す要素（btn-group クラス）を他のボタングループを表す要素（btn-group クラス）の中に配置（ネスト）することで、ボタングループ内にドロップダウンメニューを実装することができます。

<div class="btn-group" role="group" aria-label="Group with dropdown menu">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"> 
      Dropdown 
      <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul> 
  </div>
</div>

通常のドロップダウンは、ドロップダウンの機能の範囲を div 要素等で囲み、その要素に dropdown クラスを指定しますが、ボタングループをネストしてドロップダウンを実装する場合は、btn-group クラスを指定することになります。（ドロップダウンボタン）

垂直ボタングループ

グループ化するボタンを囲む div 要素に btn-group-vertical というクラスを指定すると垂直方向にボタンを並べるボタングループを作成できます。但し、スプリットボタンは垂直ボタングループでは使えません。

<div class="btn-group-vertical" role="group" aria-label="Vertical buttons">
  <button type="button" class="btn btn-default">Top</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Bottom</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"> 
      Dropdown 
      <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul> 
  </div>
</div>

両端揃えボタングループ

親要素の幅に合わせてボタングループを表示（両端揃え表示）するには、グループ化するボタンを囲む div 要素に btn-group と btn-group-justified というクラスを指定します。

a 要素を使う場合

a 要素を使ってボタンを作成する場合、a 要素に btn と btn-xxxx クラスを指定します。そしてそれらのボタンを btn-group クラスと btn-group-justified クラスを指定した div 要素で囲みます。

また、a 要素には role="button" を指定します。

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <a href="#" role="button" class="btn btn-default">Left</a>
  <a href="#" role="button" class="btn btn-default">Middle</a>
  <a href="#" role="button" class="btn btn-default">Right</a>
  <div class="btn-group" role="group">
    <a href="#" role="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"> 
      Dropdown 
      <span class="caret"></span> 
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul> 
  </div>
</div>

Left Middle Right

button 要素を使う場合

button 要素を使ってボタンを作成する場合、それぞれの button 要素を btn-group クラスを指定した div 要素で囲む必要があります。

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"> 
      Dropdown 
      <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu">
      <li><a href="#bg">Dropdown link</a></li>
      <li><a href="#bg">Dropdown link</a></li>
    </ul> 
  </div>
</div>

ドロップダウンボタン

通常のドロップダウンは、ドロップダウンの機能の範囲を div 要素等で囲み、その要素に dropdown クラスを指定しますが、btn-group クラスを指定してドロップダウンボタンを作成することができます。その他のマークアップは通常のドロップダウンと同じです。

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Default <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Primary <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
・・・以下省略・・・

スプリットボタン

ボタンとドロップダウンメニュー（トグルボタン）を別々に分けるスプリットボタンも作成することができます。（ボタングループの応用/ネスト）

以下の例では、アクセシビリティ用にスクリーンリーダ・オンリーのクラス（sr-only）をトグルボタンに指定してラベルを付けています。

<div class="btn-group">
  <button type="button" class="btn btn-default">Split button</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

サイズの調整

個々のドロップダウンボタンのサイズは button 要素に以下のクラスを指定して調整することができます。

btn-lg ：通常サイズより大きいボタン
指定なし：通常サイズ
btn-sm ：通常サイズより小さいボタン
btn-xs ：さらに小さなボタン

<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Large<span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Small <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

スプリットボタンの場合は、btn-group クラスを指定した div 要素に以下のクラスを指定してサイズを調整することができます。

btn-group-lg：各ボタンを大サイズで表示
指定なし：各ボタンをデフォルト（通常）のサイズで表示
btn-group-sm：各ボタンを小サイズで表示
btn-group-xs：各ボタンを極小サイズで表示

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-default">Large split button</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ドロップアップ

btn-group クラスを指定した div 要素に dropup クラスを追加することで、開閉する際にサブメニューが上側に表示されます。

<div class="btn-group dropup">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Drop Up <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Split button</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

インプットグループ

インプットグループを使って、テキスト入力欄にテキストやボタンを配置することができます。但し、インプットグループでは select 要素や textarea 要素を使うことはできません（インプットグループ）。

また、フォームグループやグリッドのクラスを直接インプットグループに指定するのは避けてください。代わりに、フォームグループやグリッドの要素の中にインプットグループをネストして使用するようにします。（グリッド配置の例）

基本的な使い方

配置する要素（span 要素）に input-group-addon クラスを指定します。
テキスト入力欄（input 要素）と配置する要素（input-group-addon クラスを指定した要素）を、input-group クラスを指定した div 要素で囲みます。
配置する要素（input-group-addon クラスを指定した要素）の位置は出現順（input 要素の右か左）に表示されます。

但し、１つのインプットグループ内に複数のフォームコントロール要素（form-control）を含めることはできません。また、左右どちらか側に複数のアドオンを配置することはできません。

以下は原文
We do not support multiple form-controls in a single input group.
We do not support multiple add-ons (.input-group-addon or .input-group-btn) on a single side.

<div class="input-group"> 
  <span class="input-group-addon">Name </span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span> 
</div>

<div class="input-group"> 
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span> 
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group"> 
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Name

@example.com

$ .00

Your vanity URL

https://example.com/users/

サイズの調整

input-group クラスを指定した div 要素に、btn-group-lg（大）または btn-group-sm（小）クラスを指定し、サイズを調整します。

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">大きなサイズ</span>
  <input type="text" class="form-control" placeholder="input-group-lg（大）" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">通常のサイズ</span>
  <input type="text" class="form-control" placeholder="指定なし" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">小さなサイズ</span>
  <input type="text" class="form-control" placeholder="input-group-sm（小）" aria-describedby="sizing-addon3">
</div>

大きなサイズ

通常のサイズ

小さなサイズ

チェックボックスとラジオボタン

テキストの代わりにチェックボックスやラジオボタンをインプットグループに配置することができます。チェックボックスやラジオボタンを input-group-addon クラスを指定した span 要素で囲んで配置します。

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="..."> 
  <span class="input-group-addon">
    <input type="checkbox" aria-label="...">
  </span>
</div>

<div class="input-group">
  <span class="input-group-addon">
    <input type="radio" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

グリッド配置の例

グリッドのクラスを直接インプットグループに指定するのではなく、グリッドの要素（col-xx-n クラスを指定した div 要素）の中にインプットグループをネストして使用するようにします。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ボタン・アドオン

インプットグループにボタンを配置する場合は、input-group-addon ではなく、button 要素を囲む span 要素に input-group-btn クラスを指定します。

<div class="input-group"> 
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control" placeholder="Search for...">
</div>

ドロップダウンボタンの配置

input-group-btn クラスを指定した div 要素にドロップダウンボタンを配置します。

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul> 
  </div><!-- /input-group-btn -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->

セグメントボタンの配置

input-group-btn クラスを指定した div 要素にセグメントボタン（スプリットボタン）を配置します。

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default">
      Segmented button
    </button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <span class="caret"></span> 
      <span class="sr-only">Toggle Dropdown</span> 
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul> 
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

複数ボタンの配置

１つの input-group-btn クラスの div 要素の中に複数のボタンを配置することができます。

<div class="input-group">
  <div class="input-group-btn">
    <button class="btn btn-default" type="button" aria-label="Bold"> 
      <span class="glyphicon glyphicon-bold"></span>
    </button>
    <button class="btn btn-default" type="button" aria-label="Italic"> 
      <span class="glyphicon glyphicon-italic"></span> 
    </button>
  </div>
  <input class="form-control" aria-label="Text input with multiple buttons">
</div>

<div class="input-group">
  <input class="form-control" aria-label="Text input with multiple buttons">
  <div class="input-group-btn">
    <button class="btn btn-default" type="button" aria-label="Help"> 
      <span class="glyphicon glyphicon-question-sign"></span> 
    </button>
    <button class="btn btn-default" type="button">Action</button>
  </div>
</div>

ナビゲーション（Navs）

Bootstrap には、タブ形式やピル形式のナビゲーションが用意されています。（Navs）

タブ形式ナビゲーション

タブ形式ナビゲーション（タブ・メニュー）を作成するには、ul 要素に nav 及び nav-tabs クラスを指定し、li 要素と a 要素でリンクを作成します。選択された状態で表示する項目には li 要素に active のクラスを指定します。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

role="presentation" は視覚表現を行う（単に視覚的な表現である）要素に対して指定する属性です。

ピル形式ナビゲーション

ピル形式ナビゲーションを作成するには、ul 要素に nav 及び nav-pills クラスを指定し、li 要素と a 要素でリンクを作成します。選択された状態で表示する項目には li 要素に active のクラスを指定します。（タブ形式とピル形式の違いは、nav-tabs クラスか nav-pills クラスを指定するかの違いです）

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

垂直方向ピル形式ナビゲーション

ピル形式ナビゲーションは、nav-stacked クラスを追加することで垂直方向に重ねて表示することができます。

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

両端揃え配置

ナビゲーションの項目を親要素の幅に合わせて、両端揃え（均等配置）で表示するには、ul 要素に nav-justified クラスを追加します。

<ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-pills nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

タブ形式

ピル形式

リンクの無効化

メニュー項目のリンクを無効化（クリックできないように）するには、li 要素に disabled クラスを指定します。（タブ形式、ピル形式ともに共通）

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation" class="disabled"><a href="#">準備中</a></li>
</ul>

ドロップダウンの追加

ドロップダウンの機能を追加するには以下のようにします。
（タブ形式、ピル形式ともに共通）

ドロップダウンを追加する項目の li 要素に dropdown クラスを指定
サブメニューを開閉する a 要素に dropdown-toggle クラスと data-toggle="dropdown" 属性及び role="button" 属性を指定
サブメニューの内容（ul 要素）に dropdown-menu クラスを指定

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation" class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"> 
      Dropdown <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider" role="separator"></li>
      <li><a href="#">Separated link</a></li>
    </ul> 
  </li>
</ul>

以下はピル形式の例です。違いは、外側の ul 要素のクラス（nav-pills）だけです。

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation" class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"> 
      Dropdown <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider" role="separator"></li>
      <li><a href="#">Separated link</a></li>
    </ul> 
  </li>
</ul>

タブ切り替え

Bootstrap には、JavaScript を利用したタブ切り替え機能が用意されています。（Togglable tabs）

タブの作成は、「タブ形式ナビゲーション」の作成と同じです。

ul 要素に nav 及び nav-tabs クラスを指定し、li 要素と a 要素でリンクを作成します。選択された状態で表示する項目には li 要素に active のクラスを指定します。また、ul 要素に role="tablist"　属性を指定します。

各タブをクリックした時に、表示内容を切り替えるには、li 要素の中の a 要素に data-toggle="tab" の属性を指定します。また、a 要素に role="tab" 属性も指定します。

a 要素の href 属性には、# と表示内容が記述されている div 要素の id の値を指定します。

各タブの表示内容は、 class="tab-content" を指定した div 要素で囲みます。

その中に class="tab-pane を指定した div 要素を入れて、各タブの表示内容を記述し、それぞれの div 要素に id 属性（a 要素の href 属性に対応する値）を指定します。また、最初から表示する内容に active クラスを追加します。この div 要素には、 role="tabpanel" 属性も指定します。

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active">
   <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li role="presentation">
   <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li role="presentation">
   <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
  </li>
</ul> 
<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    <h3>Home</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <h3>Profile</h3>
    <p>Corporis, modi, illum, at ...</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="messages">
    <h3>Messages</h3>
    <p>Nesciunt, quibusdam saepe fuga...</p>
  </div>
</div>

aria-controls 属性は、その要素が値（id 名）に指定した要素を制御することを示す属性です。（参考：WAI-ARIAを意識したタブパネルのマークアップを考えてみる）

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, recusandae, non, possimus enim doloremque ullam adipisci voluptatibus aut laboriosam cumque quam quasi voluptas error quis nulla necessitatibus officia maiores consectetur.

Profile

Corporis, modi, illum, at blanditiis fugiat libero laborum esse est aliquam et maiores eum doloremque consequuntur reiciendis vel nostrum ab sit magnam omnis eius fuga qui molestias nemo! Nostrum, vero.

Messages

Nesciunt, quibusdam saepe fuga asperiores officiis beatae quaerat quasi quos placeat quam vel laudantium ex odio similique earum porro harum animi sequi magni cum! Porro excepturi ab aliquid quibusdam nisi.

他のプラグインとの競合

スムーズスクロールなどを使っている場合、このタブ切り替え機能と競合する可能性があります。もし、タブ切り替え機能がうまく働かない場合は、チェックしてみるといいかも知れません。

このサイトではスムーズスクロールの機能を $('a[href^=#]') を使って記述していますが、これが競合していたため、最初はタブ切り替えが機能しませんでした。以下のように、not() を使ってタブ機能で使用する a 要素の href 属性をスムーズスクロールの対象外とすることで、機能するようになりました。

$('a[href^=#]').not('.nav.nav-tabs a, .nav.nav-pills a').click(function(){・・・

「ピル形式ナビゲーション」でも、同様の機能を実現することができます。

その場合は、 nav 及び nav-pills クラスでピル形式ナビゲーションを作成し、li 要素の中の a 要素に data-toggle="pill" 属性を指定します。その他は前述のタブ切り替えと同じです。

<!-- Nav tabs --> 
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li>
</ul> 
<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    <h3>Home</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <h3>Profile</h3>
    <p>Corporis, modi, illum, at ...</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="messages">
    <h3>Messages</h3>
    <p>Nesciunt, quibusdam saepe fuga...</p>
  </div>
</div>

Home

Profile

Messages

ドロップダウンの追加

ドロップダウンメニューを追加した場合のタブ切り替えの例です。構造がわかりやすいように aria-xxxx 属性やそれに関連する id 属性を省略してあります。

<ul class="nav nav-tabs">
  <li class="active" role="presentation"> 
    <a id="home-tab" href="#home" role="tab" data-toggle="tab">Home</a> 
  </li>
  <li role="presentation"> 
    <a id="profile-tab" href="#profile" role="tab" data-toggle="tab">Profile</a> 
  </li>
  <li class="dropdown" role="presentation"> 
    <a id="myTabDrop1" class="dropdown-toggle" href="#" data-toggle="dropdown"> 
      Dropdown <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu">
      <li><a href="#dropdown1" role="tab" data-toggle="tab">Events</a></li>
      <li><a href="#dropdown2" role="tab" data-toggle="tab">News</a></li>
    </ul> 
  </li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane active" role="tabpanel">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div id="profile" class="tab-pane" role="tabpanel">
    <p>Odit quos sint inventore ...</p>
  </div>
  <div id="dropdown1" class="tab-pane" role="tabpanel">
    <p>Quod, inventore, similique...</p>
  </div>
  <div id="dropdown2" class="tab-pane" role="tabpanel">
    <p>Fugit, velit architecto non...</p>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nam, ea quam placeat nihil quisquam rem ullam! Eius, iste, fugit, officia provident a aspernatur iusto enim veritatis nihil quam dolorum!

Odit quos sint inventore eaque. Ut, eaque, quidem, ducimus, ipsa corporis aliquam velit minus perferendis facilis cumque voluptatibus distinctio provident commodi ab vitae ullam magni. Corporis praesentium molestias explicabo voluptatem?

Quod, inventore, similique illum ipsum deleniti reiciendis dicta corporis minus voluptatem qui blanditiis ipsa corrupti porro? Molestiae, laboriosam impedit fuga libero molestias quisquam temporibus cum veniam necessitatibus totam laudantium laborum.

Fugit, velit architecto non voluptatem dolores reiciendis aspernatur veritatis totam dicta commodi possimus dignissimos fugiat neque sunt itaque! Ad, eligendi quaerat minus sint non doloribus provident sed totam. Quos, veniam.

以下は、 aria-xxxx 属性などを省略していないコードです。aria-labelledby 属性は、その要素をラベル付けする要素を id 属性で特定します。

<ul class="nav nav-tabs" role="tablist">
  <li class="active" role="presentation"> 
    <a id="home-tab" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a> 
  </li>
  <li role="presentation"> 
    <a id="profile-tab" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a> 
  </li>
  <li class="dropdown" role="presentation"> 
    <a id="myTabDrop1" class="dropdown-toggle" href="#" data-toggle="dropdown" aria-controls="myTabDrop1-contents"> 
      Dropdown <span class="caret"></span> 
    </a> 
    <ul id="myTabDrop1-contents" class="dropdown-menu" aria-labelledby="myTabDrop1">
      <li> <a id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">Events</a> </li>
      <li> <a id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">News</a> </li>
    </ul> 
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div id="home" class="tab-pane active" role="tabpanel" aria-labelledby="home-tab">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">
    <p>Odit quos sint inventore ...</p>
  </div>
  <div id="dropdown1" class="tab-pane" role="tabpanel" aria-labelledby="dropdown1-tab">
    <p>Quod, inventore, similique...</p>
  </div>
  <div id="dropdown2" class="tab-pane" role="tabpanel" aria-labelledby="dropdown2-tab">
    <p>Fugit, velit architecto non ....</p>
  </div>
</div>

フェード効果

タブやピルをクリックして切り替える際に、フェード効果を加えることができます。その場合、tab-pane クラスを指定している div 要素に、fade というクラスを追加します。また、最初から表示される内容の div 要素（.active）には in というクラスを指定する必要があります。

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active fade in" id="home">
    <h3>Home</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="profile">
    <h3>Profile</h3>
    <p>Corporis, modi, illum, at ...</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="messages">
    <h3>Messages</h3>
    <p>Nesciunt, quibusdam saepe fuga...</p>
  </div>
</div>

Home

Profile

Messages

イベント

タブのイベントについては Tab/Events に記載されています。

タブのイベントは、タブメニューの a 要素（a[data-toggle="tab"]）がクリックされた際に以下の順序で発火します。

hide.bs.tab (現在のアクティブなタブで発生)
show.bs.tab (これから表示されるタブで発生)
hidden.bs.tab (以前のアクティブなタブで発生, hide.bs.tab event の対象のタブ)
shown.bs.tab (新しく表示されたタブで発生, show.bs.tab event の対象のタブ)

また、event.target は、その時にアクティブなタブを表し、event.relatedTargetは、（もしあれば）以前アクティブだったタブを表します。

以下は、実用的ではありませんが、タブが切り替わったら、表示される内容の中の p 要素の背景色を変更する例です。

$(e.target).attr("href") は a 要素の href 属性なので、$($(e.target).attr("href")) で表示される div 要素（tab-pane クラス）になります。

jQuery(function($){ 
  $('#tab_sample a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($(e.target).attr("href")).find("p").css("background-color", "#9EE4F0")
    .animate({
      backgroundColor: '#fff', 
    }, 1000); 
  })   
});

<div id="tab_sample"> 
  <!-- Nav tabs --> 
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul> 
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <h3 class="noindex">Home</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <h3 class="noindex">Profile</h3>
      <p>Corporis, modi, illum, at...</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <h3 class="noindex">Messages</h3>
      <p>Nesciunt, quibusdam saepe fuga...</p>
    </div>
  </div>
</div>

Home

Profile

Messages

ナビゲーションバー

ナビゲーションバー（Navbar）はサイトのメインメニューとして利用できるレスポンシブ対応のメニューです。

基本構造

以下がナビゲーションバーの基本的な構造です。

nav 要素で全体を囲み、navbar と navbar-default クラスを指定します。
その内側を container-fluid または container クラスを指定した div 要素で囲みます。
その中に navbar-header クラスを指定した div 要素（ヘッダー）を配置します。
ヘッダー内には、button 要素（バーガー：切り替えボタン）と a 要素（左端に表示する文字）を配置します。
ヘッダー内の button 要素には、navbar-toggle と collapsed クラスを指定し、data-toggle="collapse" 属性と data-target 属性（値は collapse と navbar-collapse クラスを指定した div 要素の id 属性）を指定します。
ヘッダー内の a 要素（ヘッダーの文字・ブランドイメージ）には、navbar-brand クラスを指定します。リンクが不要な場合は、span 要素で記述し、navbar-brand クラスを指定します。
ヘッダーに続いて、collapse と navbar-collapse クラスを指定した div 要素を配置します。この要素には id 属性を指定します（button 要素の data-target 属性の値）。
div 要素（collapse と navbar-collapse クラス）内に nav と navbar-nav クラスを指定した ul 要素を配置し、その中にメニュー項目となる li 要素と a 要素を配置します。
現在表示されているページのメニュー項目の li 要素に active クラスを指定します。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- ヘッダー -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar1"">
        <span class="sr-only">トグルメニュー</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#aa">Brand</a>
    </div>
    <!-- ヘッダーここまで -->
    <div class="collapse navbar-collapse" id="sample-navbar1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#aa">Link1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#aa">Link2</a></li>
        <li><a href="#aa">Link3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ウィンドウ幅を狭めると、左側にブランドイメージ、右側にボタン（バーガー）が表示され、ボタンをクリックするとメニュー項目が表示されます。

ドロップダウン

ドロップダウンメニューは、メニュー項目の li 要素に dropdown クラスを指定し、a 要素を使ったドロップダウンを設定します。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar1D"> 
        <span class="sr-only">トグルメニュー</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#aa">Brand</a> 
    </div>
    <div class="collapse navbar-collapse" id="sample-navbar1D"> 
      <ul class="nav navbar-nav">
        <li class="active"><a href="#aa">Link1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#aa">Link2</a></li>
        <li class="dropdown"> <!-- ドロップダウン -->
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">
            Dropdown <span class="caret"></span>
          </a> 
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul> 
        </li><!-- ドロップダウンここまで -->
      </ul> 
    </div>
  </div>
</nav>

ブランドイメージ

ブランドイメージ（navbar-brand クラスの a 要素）の文字を画像に置き換えることもできます。文字の代わりに img 要素を配置します。画像のサイズによっては、パディング等の調整が必要になります。

以下はヘッダー部分の抜粋です。画像は 40x40 px の画像を CSS で幅を 20px に指定しています。

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar2"> 
    <span class="sr-only">トグルメニュー</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
  </button>
  <a class="navbar-brand" href="#">
    <img src="images/brand_40x40.png" alt="brand image">
  </a> 
</div>

検索フォーム

ナビゲーションバーに、フォーム（form 要素）を配置することもできます。

form 要素に navbar-form クラスを指定します。navbar-form クラスを指定すると、フォームがインラインフォームとして扱われ、ナビゲーションバーの上下中央に配置されます。インラインフォームなので、size 属性でテキストボックスの幅を指定することができます。

以下の例では、 navbar-left クラスを指定して左寄せにしています。navbar-right クラスを指定すると、右寄せに配置することができます。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar3"> 
        <span class="sr-only">トグルメニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="# ">Brand</a> </div>
    <div class="collapse navbar-collapse" id="sample-navbar3"> <ul class="nav navbar-nav">
        <li class="active"><a href="# ">Link1 <span class="sr-only">(現在の場所)</span></a></li>
        <li><a href="# ">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
      <form class="navbar-form navbar-left"><!-- フォーム -->
        <div class="form-group">
          <input type="text" class="form-control" placeholder="キーワード">
        </div>
        <button type="submit" class="btn btn-default">検索</button>
      </form>
    </div>
  </div>
</nav>

検索フォーム・ナビゲーションバーのサンプル

ボタンの配置

ナビゲーションバーに、ボタン（button 要素）を配置するには button 要素に navbar-btn クラスを指定します。このクラスを指定しないとボタンがバーの上端に配置されてしまいます。

<div id="wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar4"> 
      <span class="sr-only">トグルメニュー</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button>
    <a class="navbar-brand" href="#">Brand</a> 
  </div>
  <div class="collapse navbar-collapse" id="sample-navbar4"> 
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link1 <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
    <button type="button" class="btn btn-default navbar-btn">Sign in</button>
  </div>
</div>
</nav>

テキストの配置

ナビゲーションバーにテキストを配置するには、p 要素を使い、navbar-text クラスを指定します。

<div id="wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar5"> 
      <span class="sr-only">トグルメニュー</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button>
    <a class="navbar-brand" href="#">Brand</a> 
  </div>
  <div class="collapse navbar-collapse" id="sample-navbar5"> 
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link1 <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
    <p class="navbar-text">Signed in as Miles Davis</p>
  </div>
</div>
</nav>

リンクテキスト

ナビゲーションの部品以外でリンクを設定する場合、その a 要素に navbar-link クラスを指定します。（リンクの文字色を他の文字色に合わせます）

<p class="navbar-text">Signed in as <a href="#" class="navbar-link">Miles Davis</a></p>

部品の配置

メニュー項目、フォーム、テキストなどナビゲーションの部品は、navbar-left や navbar-right クラスを指定することで左寄せ、右寄せにすることができます。

左寄せ：navbar-left クラス
右寄せ：navbar-right クラス

但し、複数の navbar-right クラスの指定はサポートされていません。

<button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>

ナビゲーションバーの固定

nav 要素に特定のクラスを指定することで、ナビゲーションバーを上部に配置したり、上部や下部に固定することができます。

上部固定

nav 要素に navbar-fixed-top クラスを追加すると、ナビゲーションバーを画面上部に固定表示することができます。但し、このクラスを使用する場合は、最上部のコンテンツがナビゲーションバーによって隠れないように、body 要素に padding-top: 70px; の余白（パディング）を指定する必要があります。

ナビゲーションバーの高さはデフォルトでは 50px です。必要に応じてパディングの値を変更します。

また、ナビゲーションバーを固定表示させると、ウィンドウ幅いっぱいにナビゲーションバーが表示されます。ナビゲーションバーのヘッダーをコンテンツの幅にそろえて配置するには、ナビゲーションバー内の一番外側の div 要素に指定するクラスを container （固定幅）にします。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar3"> <span class="sr-only">トグルメニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#">Brand</a> </div>
    <div class="collapse navbar-collapse" id="sample-navbar3"> <ul class="nav navbar-nav">
        <li class="active"><a href="# ">Link1 <span class="sr-only">(現在の場所)</span></a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="キーワード" size="10">
        </div>
        <button type="submit" class="btn btn-default">検索</button>
      </form>
    </div>
  </div>
</nav>
<div class="container"><!-- Main component -->
  <div class="jumbotron">
    <h1>Navbar サンプル</h1>
    <p>上部固定のナビゲーションバーのサンプルです。</p>
  </div>
</div>

上部固定・ナビゲーションバーのサンプル１

上部固定・ナビゲーションバーのサンプル２（最大幅指定）

下部固定

nav 要素に navbar-fixed-bottom クラスを追加すると、ナビゲーションバーを画面下部に固定表示することができます。但し、このクラスを使用する場合は、最下部のコンテンツがナビゲーションバーによって隠れないように、body 要素に padding-bottom: 70px; の余白（パディング）を指定する必要があります。

ナビゲーションバーの高さはデフォルトでは 50px です。必要に応じてパディングの値を変更します。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar3"> <span class="sr-only">トグルメニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="# ">Brand</a> </div>
    <div class="collapse navbar-collapse" id="sample-navbar3"> <ul class="nav navbar-nav">
        <li class="active"><a href="# ">Link1 <span class="sr-only">(現在の場所)</span></a></li>
        <li><a href="# ">Link2</a></li>
        <li><a href="# ">Link3</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="キーワード" size="10">
        </div>
        <button type="submit" class="btn btn-default">検索</button>
      </form>
    </div>
  </div>
</nav>
<div class="container"><!-- Main component -->
  <div class="jumbotron">
    <h1>Navbar サンプル</h1>
    <p>下部固定のナビゲーションバーのサンプルです。</p>
  </div>
</div>

下部固定・ナビゲーションバーのサンプル

上部配置

nav 要素に navbar-static-top クラスを追加すると、ナビゲーションバーを上部に隙間なく配置することができます。固定表示ではないので、スクロールすると、それに合わせてナビゲーションバーも移動します。

固定表示の navbar-fixed-* クラスとは異なり、body 要素に余白（パディング）を指定する必要はありません。

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sample-navbar3"> <span class="sr-only">トグルメニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="# ">Brand</a> </div>
    <div class="collapse navbar-collapse" id="sample-navbar3"> <ul class="nav navbar-nav">
        <li class="active"><a href="# ">Link1 <span class="sr-only">(現在の場所)</span></a></li>
        <li><a href="# ">Link2</a></li>
        <li><a href="# ">Link3</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="キーワード" size="10">
        </div>
        <button type="submit" class="btn btn-default">検索</button>
      </form>
    </div>
  </div>
</nav>
<div class="container"><!-- Main component -->
  <div class="jumbotron">
    <h1>Navbar サンプル</h1>
    <p>上部配置のナビゲーションバーのサンプルです。</p>
  </div>
</div>

上部配置・ナビゲーションバーのサンプル

色の反転

nav 要素に navbar-default の代わりに navbar-inverse クラスを指定すると、ナビゲーションバーの色を反転させて、黒を基調とした表示になります。

<nav class="navbar navbar-inverse">

パンくずリスト

Bootstrap には、パンくずリストを作成するクラスが用意されています。（Breadcrumbs）

パンくずリストを作成するには、ol 要素に breadcrumb クラスを指定し、続いて li 要素と a 要素で階層を表すリンク項目を記述します。その際に現在表示されているページのリンク項目の li 要素には、active クラスを指定します。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li class="active">World</li>
</ol>

ページネーションとページャー

Bootstrap には、ページネーションやページャーを作成するクラスが用意されています。（Pagination）

ページネーション

ページネーションを作成するには、nav 要素内に pagination クラスを指定した ul 要素を配置し、li 要素と a 要素でリンクを記述します。

「前へ戻る」の記号は、« を使用し、「次へ進む」の記号は » 特殊文字を使用しています。また、aria-label を使ってラベルを設定しています。

また、以下の例ではページネーションを中央揃えで表示するために、 nav 要素に text-center クラスを指定しています。

<nav class="text-center" aria-label="ページナビゲーション">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="前のページへ">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="次のページへ">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

現在のページとして表示

li 要素に active クラスを指定すると、現在のページとして表示（青色に表示）されます。その際には、リンク機能を無効にするために a 要素の代わりに span 要素を使用します。

<nav aria-label="ページナビゲーション">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="前のページへ">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><span>3</span></li><!--現在のページ-->
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="次のページへ">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

リンクの無効化

リンクを無効化するには、リンク項目の li 要素に、disabled クラスをを指定します。その際には、リンク機能を無効にするために a 要素の代わりに span 要素を使用します。

<nav aria-label="ページナビゲーション">
  <ul class="pagination">
    <li class="disabled"><!--リンク無効化-->
      <span aria-label="前のページへ">
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active"><span>1</span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="次のページへ">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ページネーションのサイズ

ページネーションのサイズを大きくするには pagination-lg クラスを、サイズを小さくするには pagination-sm クラスを ul 要素に追加指定します。

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ラベル

ラベルを作成するには、span 要素に label クラスと label-default クラスを指定します。ラベルの大きさはその親要素に合わせて自動的に調整（75% の大きさ）されます。bootstrap.css には以下が設定されています。（Labels）

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

<p>Label Example <span class="label label-default">New</span></p>

Label Example New

カラーバリエーション

label-default クラスの代わりに、label-primary や label-success 等を指定することでラベルの色を変更することができます。

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Default Primary Success Info Warning Danger

バッジ

バッジを作成するには、span 要素に badge クラスを指定してします。（Badges）

span 要素内を空にすると、CSS の :empty を使ってバッジを表示しないようになっていますが、Internet Explorer 8 以下ではサポートされていないため、表示されてしまいます。

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

bootstrap.css には以下が設定されています（一部抜粋）。

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}

a 要素や button 要素内等で使用することができます。

<a href="#">Inbox <span class="badge">37</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">5</span>
</button>

Inbox 37

ページヘッダー

ページヘッダーは見出し等に利用できる装飾で、文字の下にグレイの線を描画する機能です。（Page header）

使い方は page-header クラスを指定した div 要素で、見出し等の要素を囲みます。（見出し要素に直接 page-header クラスを指定しても機能します）

<div class="page-header">
  <h3>Example page header <small>Subtext for header</small></h3>
</div>

bootstrap.css には以下が設定されています。

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

サムネイル

Bootstrap にはグリッドを使ったレスポンシブ対応のサムネイル用のクラスが用意されています。（Thumbnails）

使い方は、thumbnail クラスを指定した a 要素等で、img 要素を囲みます。以下の例ではリンク先を画像ファイルにしていますが、リンク先は任意です。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="images/sample.jpg" class="thumbnail">
      <img src="images/sample.jpg" alt="">
    </a>
  </div>
  ...
</div>

カスタム・コンテンツ（囲み記事）

角丸の枠線で囲み記事を作成することもできます。カスタム・コンテンツ（囲み記事）を作成するには、div 要素に thumbnail というクラスを指定し、その要素の中に見出しや段落、ボタンなどを含めることができます。

このクラスには、画像が枠線内に収まるように縮小表示されるスタイルなども含まれているため、画像を含む囲み記事などに利用できます。

また、見出しや記事などを caption というクラスを指定した div 要素で囲むと適切な余白を確保できます。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="images/sample.jpg" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  ...
</div>

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nam, ea quam placeat nihil quisquam rem ullam! Eius, iste, fugit, officia provident a aspernatur iusto enim veritatis nihil quam dolorum!

Button Button

Thumbnail label

Button Button

bootstrap.css には以下が設定されています。

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

アラート

アラートはメッセージの表示等に利用できるスタイルです。アラートを作成するには、div 要素で全体を囲み、この div 要素に alert クラスとアラートの色を指定するクラス（alert-xxxx）を指定します。（Alerts）

ラベルなどのような、デフォルトのグレイの色のアラートはありません。以下の4種類からコンテキストに合った色を選択します。

<div class="alert alert-success" role="alert">alert-success</div>
<div class="alert alert-info" role="alert">alert-info</div>
<div class="alert alert-warning" role="alert">alert-warning</div>
<div class="alert alert-danger" role="alert">alert-danger</div>

alert-success

alert-info

alert-warning

alert-danger

閉じられるアラート

アラートを閉じて非表示にする機能も用意されています。この機能を使用するには、alert クラスを指定した div 要素に alert-dismissible クラスを追加します。

また、閉じるボタンは button 要素を使い、close クラス及び data-dismiss="alert" 属性（JavaScript が正しく機能するための Bootstrap 独自の属性）を指定します。×印は、× 特殊文字を使用します。

<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>成功！</strong> 完了しました。
</div>

成功！ 完了しました。

アラート内のリンク

アラート内にリンク（a 要素）を設置する場合、a 要素に alert-link クラスを指定するとアラートの色に合ったリンクの色になります。また、リンク部分が太字で表示されます。

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">Success Link</a> sample.
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">Info Link</a> sample.
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">Warning Link</a> sample.
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">Danger Link</a> sample.
</div>

Success Link sample.

Info Link sample.

Warning Link sample.

Danger Link sample.

リストグループ

リストグループはナビゲーションなど幅広く利用できる表示形式です。（List group）

基本的なリストグループは、ul 要素に list-group クラスを指定し、li 要素に list-group-item クラスを指定してリストを作成します。

リストグループは親要素の幅に合わせて表示されるため、必要に応じて CSS やグリッドシステムで幅を調整します。

<ul class="list-group">
  <li class="list-group-item">Manhattan</li>
  <li class="list-group-item">Brooklyn</li>
  <li class="list-group-item">Queens</li>
  <li class="list-group-item">Bronx</li>
  <li class="list-group-item">Staten Island</li>
</ul>

Manhattan
Brooklyn
Queens
Bronx
Staten Island

リンク付きリストグループ

リンク付き（a 要素を使った）リストグループは、div 要素と a 要素で作成します。その場合、div 要素に list-group クラスを指定し、 a 要素に list-group-item クラスを指定します。

また、現在のページを示す active クラスや、クリックできない（無効）を示す disabled クラスを指定することができます。

<div class="list-group">
  <a href="#" class="list-group-item active">
    Manhattan
  </a>
  <a href="#" class="list-group-item">Brooklyn</a>
  <a href="#" class="list-group-item">Queens</a>
  <a href="#" class="list-group-item">Bronx</a>
  <a href="#" class="list-group-item disabled">Staten Island</a>
</div>

Manhattan Brooklyn Queens Bronx Staten Island

ボタンを使ったリストグループ

button 要素を使ってもリストグループを作成することができます。その場合、div 要素に list-group クラスを指定し、 button 要素に list-group-item クラスを指定します。

但し、その際に button 要素に btn クラスを指定してはいけません。

<div class="list-group">
  <button type="button" class="list-group-item"> Manhattan</button>
  <button type="button" class="list-group-item">Brooklyn</button>
  <button type="button" class="list-group-item">Queens</button>
  <button type="button" class="list-group-item">Bronx</button>
  <button type="button" class="list-group-item">Staten Island</button>
</div>

バッジの挿入

どのタイプのリストグループでも、リスト項目（list-group-item クラスの要素）にバッジを配置することができます。配置したバッジは自動的に右寄せで表示されます。

<ul class="list-group">
  <li class="list-group-item"><span class="badge">14</span>Manhattan</li>
  <li class="list-group-item">Brooklyn</li>
  <li class="list-group-item">Queens</li>
  <li class="list-group-item"><span class="badge">7</span>Bronx</li>
  <li class="list-group-item">Staten Island</li>
</ul>

14Manhattan
Brooklyn
Queens
7Bronx
Staten Island

コンテクスチュアルカラー

リスト項目（list-group-item クラスの要素）に list-group-item-success 等のコンテクスチュアルカラーのクラスを指定することで、色をつけることができます。

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Manhattan</li>
  <li class="list-group-item list-group-item-info">Brooklyn</li>
  <li class="list-group-item list-group-item-warning">Queens</li>
  <li class="list-group-item list-group-item-danger">Bronx</li>
  <li class="list-group-item">Staten Island</li>
</ul>

Manhattan (success)
Brooklyn (info)
Queens (warning)
Bronx (danger)
Staten Island

カスタムコンテンツ

リストの各項目を見出しと本文で構成するリストグループを作成することができます。

その場合、見出しとなる要素（h1 ～ h6 要素等）に list-group-item-heading クラスを、本文となる要素(p 要素等）に list-group-item-text クラスを指定します。

h1 ～ h6 要素や p 要素以外の要素を使って、見出しと本文を作成することもできます。

<div class="list-group">
  <a class="list-group-item" href="#">
    <h4 class="list-group-item-heading">New York</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet</p>
    <p class="list-group-item-text"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 212-345-6789</p>
  </a>
  <a class="list-group-item active" href="#">
    <h4 class="list-group-item-heading">Los Angels</h4>
    <p class="list-group-item-text">Consectetur adipisicing elit</p>
    ....
  </a>
  <a class="list-group-item" href="#">
    <h4 class="list-group-item-heading">Houston</h4>
    <p class="list-group-item-text">Officia provident a aspernatur</p>
    ....
  </a>
</div>

パネル

パネルは、ヘッダー、本文、フッターで構成される囲み記事を作成するスタイル設定です。（Panels）

パネルを作成するには、panel と panel-default クラスを指定した div 要素で全体を囲みます。panel クラスはボーダーとパディングを設定します。

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Basic panel example

panel と panel-default クラスを指定した div 要素の中に、必要に応じて以下の要素を配置します。

ヘッダーとなる panel-heading クラスを指定した div 要素
本文となる panel-body クラスを指定した div 要素
フッターとなる panel-footer クラスを指定した div 要素

ヘッダー内で、h1～h6 要素を使用する場合は、h1～h6 要素に panel-title クラスを指定すると、見出しをパネルタイトルのスタイルに合わせて表示できます。

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">
    Panel footer
  </div>
</div>

Panel title

Panel content

Panel footer

カラー

前述の例では、外側の div 要素に panel-default クラスを指定しましたが、以下のようなクラスを指定することで、パネルのヘッダーや枠線の色（コンテクスチュアルカラー）を変更することができます。

panel-primary
panel-success
panel-info
panel-warning
panel-danger

<div class="panel panel-primary">
  <div class="panel-heading">Panel title</div>
  <div class="panel-body">Panel content</div>
</div>

<div class="panel panel-success">
  <div class="panel-heading">Panel title</div>
  <div class="panel-body">Panel content</div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel title</div>
  <div class="panel-body">Panel content</div>
</div>

<div class="panel panel-warning">
  <div class="panel-heading">Panel title</div>
  <div class="panel-body">Panel content</div>
</div>

<div class="panel panel-danger">
  <div class="panel-heading">Panel title</div>
  <div class="panel-body">Panel content</div>
</div>

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

表やリストグループの表示

パネル内に表（テーブル）やリストグループを含ませることができます。

表を含んだパネル

ボーダー（枠線）なしの表をパネル内に挿入し、表示することができます。表には table クラスを指定する必要があります。

以下の例はレスポンシブ対応にするために、表を table-responsive クラスの div 要素で囲んでいます。

<div class="panel panel-default"> 
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Table -->
  <div class="table-responsive">
    <table class="table">
      <tr>
        <th>画面サイズ</th>
        <th>｛prefix｝</th>
        <th>指定方法（n は数値）</th>
      </tr>
      <tr>
        <td>モバイル <br>
          （768px未満）</td>
        <td>xs エキストラスモール</td>
        <td>col-xs-n</td>
      </tr>
      <tr>
        <td>タブレット<br>
          （768px以上、992px未満）</td>
        <td>sm スモール</td>
        <td>col-sm-n</td>
      </tr>
      ・・・中略・・・
    </table>
  </div>
</div>

Panel heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

画面サイズ	｛prefix｝	指定方法（n は数値）
モバイル（768px未満）	xs エキストラスモール	col-xs-n
タブレット（768px以上、992px未満）	sm スモール	col-sm-n
デスクトップ（992px以上、1200px未満）	md ミディアム	col-md-n
デスクトップ（1200px以上）	lg ラージ	col-lg-n

以下のように本文（panel-body クラスを指定した div 要素）を省略したり、フッターを追加することもできます。

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <!-- Table -->
  <div class="table-responsive">
    <table class="table">
      <tr>
        <th>画面サイズ</th>
        <th>｛prefix｝</th>
        <th>指定方法（n は数値）</th>
      </tr>
      <tr>
        <td>モバイル <br>
          （768px未満）</td>
        <td>xs エキストラスモール</td>
        <td>col-xs-n</td>
      </tr>
      ・・・中略・・・
    </table>
  </div>
  <div class="panel-footer"> Panel footer </div>
</div>

Panel heading

画面サイズ	｛prefix｝	指定方法（n は数値）
モバイル（768px未満）	xs エキストラスモール	col-xs-n
タブレット（768px以上、992px未満）	sm スモール	col-sm-n
デスクトップ（992px以上、1200px未満）	md ミディアム	col-md-n
デスクトップ（1200px以上）	lg ラージ	col-lg-n

Panel footer

リストグループを含んだパネル

パネルにリストグループを挿入して表示することもできます。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Panel Body ......</p>
  </div>
  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Manhattan</li>
    <li class="list-group-item">Brooklyn</li>
    <li class="list-group-item">Queens</li>
    <li class="list-group-item">Bronx</li>
    <li class="list-group-item">Staten Island</li>
  </ul>
</div>

Panel heading

Panel Body ......

Manhattan
Brooklyn
Queens
Bronx
Staten Island

アコーディオン（Collapse）

Collapse は、アコーディオンなどのように、折りたたみ式にコンテンツを開閉できる機能です。

a 要素を使った Collapse

a 要素で開閉する場合は、a 要素に data-toggle="collapse" 属性を指定し、href 属性に表示したり折り畳んだりするコンテンツの id 属性や class 属性の値を指定します。

表示したり折り畳んだりするコンテンツには id 属性と collapse クラスを指定します。

以下の例では、コンテンツの div 要素に well クラス（Wells）を指定して背景色のついた囲み記事のような表示にしています。

<p> 
  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">a 要素 href 属性</a> 
</p>
<div class="collapse" id="collapseExample1">
  <div class="well">Lorem ipsum dolor sit amet.....</div>
</div>

a 要素 href 属性

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nam, ea quam placeat nihil quisquam rem ullam! Eius, iste, fugit, officia provident a aspernatur iusto enim veritatis nihil quam dolorum!

button 要素を使った Collapse

button 要素で開閉する場合は、button 要素に data-toggle="collapse" 属性を指定し、data-target 属性に表示したり折り畳んだりするコンテンツの id 属性や class 属性の値を指定します。

表示したり折り畳んだりするコンテンツには id 属性と collapse クラスを指定します。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">button 要素 data-target 属性</button>
</p>
<div class="collapse" id="collapseExample2">
  <div class="well">Odit quos sint inventore eaque.....</div>
</div>

aria-expanded 属性

aria-expanded 属性は要素の開閉の状態を示すための WAI-ARIA の属性で、値には true (開いている状態)または false (閉じている状態) を指定することができます。Collapse の機能を使う場合は、この属性を指定することが推奨されています。値はユーザーの操作に伴い Bootstrap のスクリプトで自動的に変更されます。

最初から表示されている状態にするには、表示したり折り畳んだりするコンテンツに collapse と in クラスを指定します。その場合、aria-expanded 属性の値には true を指定します。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="true" aria-controls="collapseExample3">初期状態：表示</button>
</p>
<div class="collapse in" id="collapseExample3">
  <div class="well">Quod, inventore, similique. ....</div>
</div>

イベント

Collapse のイベントについては Collapse/Events に記載されています。Collapse のイベントは、collapse クラスを指定した要素において発火されます。

以下はイベントを利用して、ボタンの文字列を変更する例です。

$('#collapseExample').on('show.bs.collapse', function () {
  $('[data-target="#collapseExample"]').text("隠す");
})
$('#collapseExample').on('hide.bs.collapse', function () {
  $('[data-target="#collapseExample"]').text("表示する");
})

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">表示する</button>
</p>
<div class="collapse" id="collapseExample">
  <div class="well">Odit quos sint inventore eaque....</div>
</div>

アコーディオンパネル

パネルと Collapse を使うとアコーディオンのように開閉するパネルを作成することができます。

panel panel-default や panel-heading（ヘッダー）、panel-body （本文）クラス等を指定して複数のパネルを作成します。

panel-group クラスと id 属性を指定した div 要素で全体を囲み、パネルをグループ化します。id 属性で指定した値は、後で data-parent 属性の値として指定します。

各パネルの見出しを a 要素で囲み、この a 要素に以下を指定します。

data-toggle="collapse" 属性
data-parent 属性：値は panel-group クラスを指定した div 要素の id 属性の値
href 属性：値は見出しがクリックされた時に表示する内容の div 要素（panel-body クラスの div 要素を囲む div 要素）の id 属性の値
aria-expanded 属性：値は表示する内容が表示されている場合は true、非表示の場合は false

panel-body クラスの div 要素を囲む div 要素に、panel-collapse と collapse クラス、前述の href 属性の値となる id 属性を指定します。また、この要素が初期状態で表示されている場合は、更に in クラスを指定します。

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          パネル１
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Lorem ipsum dolor sit amet...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          パネル２
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Odit quos sint inventore...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          パネル３
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Quod, inventore, similique...
      </div>
    </div>
  </div>
</div>

パネル１

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nam, ea quam placeat nihil quisquam rem ullam! Eius, iste, fugit, officia provident a aspernatur iusto enim veritatis nihil quam dolorum!

パネル２

パネル３

ポップオーバー

ツールチップと似たような機能としてポップオーバーという機能も用意されています。ポップオーバーは、説明文が見出しと本文からなる形式になっています。（Popovers）

ポップオーバーを使用するには、要素に data-toggle="popover" 属性を指定し、title 属性にポップオーバーで表示するタイトルを指定し、data-content 属性にポップオーバーの本文（内容）を指定ます。

また、data-placement 属性でポップオーバーを表示する方向を指定することができます。data-placement 属性を省略した場合は、デフォルトの値 right が適用され、ポップオーバーが右側に表示されます。指定できる値は、"top"（上）、 "bottom"（下）、 "left"（左）、 "right"（右）です。

この機能はデフォルトでは有効になっていないので、以下の JavaScript (jQuery) を記述しておく必要があります。この記述は、jquery.mins.js と bootstrap.min.js を読み込んだ後に記述する必要があります。

$(function () {
  $('[data-toggle="popover"]').popover();
})

任意のクラスを指定した要素でポップオーバーを表示させることもできます。その場合、そのクラスを使ってポップオーバーの機能を有効にします。

例えば、popovr というクラスを指定した要素でポップオーバーを表示させるには以下のようにします。以下の JavaScript (jQuery) は、クラス属性の値が "popovr" の要素で popover() を実行するというような意味になります。

$(function () {
  $('.popovr').popover();
})

以下は、button 要素を使用した場合の例です。

<button type="button" class="btn btn-info" data-toggle="popover" title="タイトル" data-content="ポップオーバー本文">クリック</button>

以下は a 要素を使ってポップオーバーを表示する例です。

<a href="#" data-content="コンテンツ（内容）" title="タイトル" data-toggle="popover">ポップオーバーを表示</a>

ポップオーバーを表示

a 要素の href 属性に # を指定した場合、トップへスクロールをしないようにするには、以下のような jQuery を記述して、デフォルトの動作を止めることができます。

$('[data-toggle="popover"]').click(function() {
  if($(this).attr('href') == '#') {
    return false;
  }
});

マウスオーバーで表示

クリックした時ではなく、マウスオーバーした際にポップオーバーを表示するようにするには、data-trigger="hover" という属性を指定します。デフォルトは data-trigger="click" です。

<a href="#" data-content="コンテンツ（内容）" title="タイトル" data-toggle="popover" data-trigger="hover">ポップオーバー</a>

ポップオーバー

モーダル

モーダル（Modals）は、ボタンやリンク等をクリックした時に、モーダルダイアログを表示する機能です。

モーダルダイアログを開く要素（button 要素や a 要素など）に data-toggle="modal" を指定し、data-target 属性にモーダルダイアログ用の div 要素の id 属性（または特定できる class 属性）の値を指定します。

続いてモーダルダイアログ用の div 要素に、modal と fade クラスを指定し、前述の data-target 属性に指定した値を id 属性に指定します。

モーダルダイアログ用の div 要素の中に modal-dialog クラスを指定した div 要素を作成し、更にその中に modal-content クラスを指定した div 要素を作成します。

modal-content クラスを指定した div 要素の中に必要に応じて、ヘッダ（modal-header クラスを指定した div 要素）、本文（modal-body クラスを指定した div 要素）、フッタ（modal-footer クラスを指定した di v要素）を配置します。ヘッダ内に表示する文字に modal-title クラスを指定しておくと、余白や行間などが適切なスタイルに設定されます。

また、モーダルダイアログを閉じるボタンを作成する必要があり、この要素には data-dismiss="modal" という属性を指定します。以下の例では、ヘッダとフッタにダイアログを閉じるためのボタンを配置しています。ヘッダのボタンには close クラスを指定しています。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> モーダル・サンプル </button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">モーダル・タイトル</h4>
      </div>
      <div class="modal-body">
        <p class="text-center"><img src="images/sample.jpg" alt=""></p>
        <p class="text-center">Sample Photo</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

モーダルダイアログのサイズ

通常（デフォルト）のモーダルダイアログは、幅 600px で表示されますが、モーダルダイアログのサイズを変更する以下のクラスが用意されています。（ウィンドウ幅が 767px 以下の場合は、ウィンドウ幅に合わせて表示されます）

modal-lg （大きなサイズ）: モーダルダイアログが幅 900px で表示されます。但し、この指定が有効になるのはウィンドウ幅が 992px 以上の場合です。991px 以下の場合は、600px で表示されます。

modal-sm （小さなサイズ）: モーダルダイアログが幅 300px で表示されます。但し、この指定が有効になるのはウィンドウ幅が 768px 以上の場合です。

これらのクラスは、modal-dialog クラスを指定した div 要素に追加します。また、以下の例では、data-target の値にモーダルダイアログ用の div 要素のクラス属性の値を指定しています。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title noindex" id="myLargeModalLabel">モーダル・タイトル</h4>
      </div>
      <div class="modal-body">
        <p class="center-block"><img src="images/sample.jpg" alt=""></p>
        <p class="center-block">Sample Photo</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title noindex" id="mySmallModalLabel">モーダル・タイトル</h4>
      </div>
      <div class="modal-body">
        <p class="text-center"><img src="images/sample.jpg" alt=""></p>
        <p class="text-center">Sample Photo</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

写真をライトボックスのように表示

モーダルを利用して、写真をライトボックスのように表示することもできます。

以下の例では、モーダルダイアログを開く要素に a 要素を使用しています。この場合、data-target 属性ではなく、href 属性でモーダルダイアログの id を指定できます。

<p><a href="#modal-lbox" data-toggle="modal"><img src="images/sample.jpg" alt="" style="width:180px"></a></p>
<div class="modal fade" id="modal-lbox" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <p class="text-center"><img src="../images/Plugins/Bootstrap/sample_img_responsive.jpg" class="img-responsive" alt=""></p>
      </div>
      <div class="modal-footer">
        <p class="text-center">Sample Photo</p>
      </div>
    </div>
  </div>
</div>

カルーセル

カルーセルはスライドショーのように画像などのコンテンツを順番に繰り返し表示する機能です。

カルーセルを作成するには、その範囲を carousel と slide クラスを指定した div 要素で囲み、data-ride="carousel" 属性を指定し、カルーセルの id を指定（この例では carousel1）します。

上記で作成した div 要素の中に、各画像に対応するアイコン（○や●）を表示するために carousel-indicators クラスを指定した ol 要素を配置し、画像の数だけ li 要素を記述します。この li 要素には、data-target 属性（値には data-ride="carousel" 属性を指定した div 要素の id を指定）と data-slide-to 属性（値は数値を0から順に指定）を指定します。また、初期表示される画像に対応する li 要素には active クラスを指定します。（●のアイコン）

続いて carousel-inner クラスを指定した div 要素を作成し、この中にそれぞれの画像を記述する item クラスを指定した div 要素を配置し、初期表示される画像の要素には active クラスを指定します。item クラスを指定した div 要素内に画像の img 要素とキャプション用の carousel-caption クラスを指定した div 要素を配置します。

最後に「前へ」や「次へ」を示すコントロールのための carousel-control クラスを指定した a 要素を記述します。

「前へ」のコントロール用 a 要素：left クラスを追加。href 属性にカルーセルの id を指定。 data-slide="prev" 属性を指定。icon-prev クラスを指定した span 要素を配置（矢印のアイコン）。
「次へ」のコントロール用 a 要素：right クラスを追加。href 属性にカルーセルの id を指定。 data-slide="next" 属性を指定。icon-next クラスを指定した span 要素を配置（矢印のアイコン）。

<div id="carousel1" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
    <li data-target="#carousel1" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img src="images/carousel_1.jpg" alt="...">
      <div class="carousel-caption">キャプション１</div>
    </div>
    <div class="item"> <img src="images//carousel_2.jpg" alt="...">
      <div class="carousel-caption">キャプション２</div>
    </div>
    ・・・中略・・・ 
    
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
      <span class="icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
      <span class="icon-next" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

コントロールの矢印は、以下のように Glyphicon のアイコンを指定することもできます。

<!-- Controls --> 
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

画像へのリンク

画像にリンクを設定する場合は、item クラスを指定した div 要素の内部を a 要素で囲みます。

<div class="item">
  <a href="http://example.com">
  <img src="images/carousel_2.jpg" alt="...">
  <div class="carousel-caption">
    キャプション２
  </div>
  </a>
</div>

オプション

カルーセルにオプションを設定するには、data-ride="carousel" 属性を指定した div 要素に data-xxxx 属性を指定します。以下のようなものがあります。

data-interval: スライドするまでの時間を指定できます。デフォルトは "5000" ミリ秒（5秒）です。"0" または "false" を指定すると自動的に開始されません。

data-pause: デフォルトは "hover" で、画像上にマウスオーバーすると自動的にスライドが停止し、マウスが離れるとスライドが開始します。"null"を指定するとマウスオーバーしても停止しません。

data-wrap: デフォルトは "true" で、スライドが繰り返されます。"false" を指定すると、最後の画像まで到達すると停止します（循環しなくなります）。

<div id="carousel1" class="carousel slide" data-ride="carousel" data-interval="0">

Web Design Leaves

Bootstrap3 の使い方(3)

ドロップダウン

a 要素を使ったドロップダウン

メニューにタイトルを表示

リンクの無効化

ボタングループ

ボタンツールバー

サイズの調整

ネスト（入れ子）

垂直ボタングループ

両端揃えボタングループ

ドロップダウンボタン

スプリットボタン

サイズの調整

ドロップアップ

インプットグループ

基本的な使い方

サイズの調整

チェックボックスとラジオボタン

ボタン・アドオン

ドロップダウンボタンの配置

セグメントボタンの配置

複数ボタンの配置

ナビゲーション（Navs）

タブ形式ナビゲーション

ピル形式ナビゲーション

両端揃え配置

リンクの無効化

ドロップダウンの追加

タブ切り替え

Home

Profile

Messages

Home

Profile

Messages

ドロップダウンの追加

フェード効果

Home

Profile

Messages

イベント

Home

Profile

Messages

ナビゲーションバー

基本構造

ドロップダウン

ブランドイメージ

検索フォーム

ボタンの配置

テキストの配置

部品の配置

ナビゲーションバーの固定

上部固定

下部固定

上部配置

色の反転

パンくずリスト

ページネーションとページャー

ページネーション

ページャー

ラベル

バッジ

ページヘッダー

Example page header Subtext for header

サムネイル

Thumbnail label

Thumbnail label

アラート

リストグループ

パネル

Panel title

カラー

表やリストグループの表示

アコーディオン（Collapse）

アコーディオンパネル

パネル１

パネル２