Bootstrap3 の使い方(3)

ボタングループ

ボタングループは複数のボタンをグループ化して表示する機能です。ボタングループは、グループ化するボタンを 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-groupbtn-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>

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 要素の右か左)に表示されます。

但し、1つのインプットグループ内に複数のフォームコントロール要素(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
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>
複数ボタンの配置

1つの 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>

タブ切り替え

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

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.

ドロップダウンの追加

ドロップダウンメニューを追加した場合のタブ切り替えの例です。構造がわかりやすいように 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?

以下は、 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

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.

イベント

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

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

  1. hide.bs.tab (現在のアクティブなタブで発生)
  2. show.bs.tab (これから表示されるタブで発生)
  3. hidden.bs.tab (以前のアクティブなタブで発生, hide.bs.tab event の対象のタブ)
  4. 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

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.

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

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

ページャー

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

<nav aria-label="ページャー">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

左右に表示

ページャーのボタンを左右に配置するには、左側に表示する li 要素に previous クラスを、右側に表示する li 要素に next クラスを指定します。

<nav aria-label="ページャー">
  <ul class="pager">
    <li class="previous"><a href="#">Previous</a></li>
    <li class="next"><a href="#">Next</a></li>
  </ul>
</nav>

リンクの無効化

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

<nav aria-label="ページャー">
  <ul class="pager">
    <li class="disabled"><span>Previous</span></li>
    <li><a href="#">Next</a></li>
  </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>

17

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

サムネイル

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

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?

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 クラスを指定した div 要素に alert-dismissible クラスを追加します。

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

<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>

リストグループ

リストグループはナビゲーションなど幅広く利用できる表示形式です。(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>  

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

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

カラー

前述の例では、外側の 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

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

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

<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>    

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>

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?

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>

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.

イベント

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>

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?

アコーディオンパネル

パネルと 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">
          パネル1
        </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">
          パネル2
        </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">
          パネル3
        </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!
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.

ツールチップ

ツールチップはマウスオーバー時に説明文を表示する機能です。(Tooltips

ツールチップを使用するには、要素に data-toggle="tooltip" 属性を指定し、title 属性にツールチップで表示する内容(説明文)を指定します。

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

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

以下の JavaScript (jQuery) は、data-toggle 属性の値が "tooltip" の要素で tooltip() を実行するというような意味になります。

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

以下は、a 要素を使った例です。

<p>これは<a href="#" data-toggle="tooltip" title="デフォルト表示(Top)">ツールチップ</a>のサンプルです。</p> 

これはツールチップのサンプルです。

以下は、button 要素を使ったサンプルです。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
      
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

クリックで表示

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

<p>クリックした際に<a href="#" data-toggle="tooltip" data-trigger="click" title="クリックで表示・非表示">ツールチップ</a>を表示</p>

クリックした際にツールチップを表示

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

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

任意のクラスで初期化

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

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

但し、クラス名に「tooltip」を使うと競合してうまく行かないので、それ以外のクラス名を指定する必要があります。

$(function () {
  $('.ttps').tooltip();
})

マークアップは、前述のマークアップと同じですが、指定したクラス属性を追加します。

<p>これは<a class="ttps" href="#" data-toggle="tooltip" title="任意のクラスで初期化">ツールチップ</a>のサンプルです。</p>  

これはツールチップのサンプルです。

ポップオーバー

ツールチップと似たような機能としてポップオーバーという機能も用意されています。ポップオーバーは、説明文が見出しと本文からなる形式になっています。(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>