Bootstrapでタブを作成する

Bootstrapで下の画像のようにタブをクリックすると表示が切り替わる「タブ」の作成方法。

タブの設定

ulでタブを表示。クラスにnav nav-tabsを設定。
liで最初に表示するところのクラスにactiveを設定。
liのa要素にdata-toggle=”tab”を設定。
a要素のhrefには表示するコンテンツのIDを設定。

コンテンツの設定

divタグのクラスにtab-contentを設定。
子要素のdivタグのクラスのtab-paneを設定。
最初に表示するdiv要素にactiveを設定。
子要素divのidには、タブに対応するidを設定。

<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">home</a></li>
	<li><a href="#second" data-toggle="tab">second</a></li>
	<li><a href="#third" data-toggle="tab">third</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="home">ホーム</div>
	<div class="tab-pane" id="second">セカンド</div>
	<div class="tab-pane" id="third">サード</div>
</div>