Bootstrap3
日本語リファレンス

広告

カプセル・メニュー


カプセル・メニュー用コンポーネントを使うサンプル。

  1. カプセル・メニュー用のul要素のclass属性に、nav nav-pillsを指定する。
  2. カプセル・メニューにおけるコンテンツ切り替え用のリンクであるa要素のdata-toggle属性に、tabを指定する。href属性には、表示する内容である要素のid属性値を指定する。
  3. 内容を表示する領域を表すdiv要素のclass属性にtab-contentを指定する。
  4. 表示する内容(div要素)のclass属性にtab-paneを指定する。id属性も指定する。
  5. 最初に表示したい内容とそのカプセル・メニューのclass属性にactiveを指定する。

サンプル

メニューAの内容

メニューBの内容

メニューCの内容

メニューDの内容

ソースコード

HTML

<!-- カプセル・メニュー -->
<ul class="nav nav-pills">
	<li><a href="#sampleContentA" data-toggle="tab">メニューA</a></li>
	<li class="active"><a href="#sampleContentB" data-toggle="tab">メニューB</a></li>
	<li><a href="#sampleContentC" data-toggle="tab">メニューC</a></li>
	<li><a href="#sampleContentD" data-toggle="tab">メニューD</a></li>
</ul>

<!-- 内容 -->
<div class="tab-content">
	<div class="tab-pane" id="sampleContentA">
		<p>メニューAの内容</p>
	</div>
	<div class="tab-pane active" id="sampleContentB">
		<p>メニューBの内容</p>
	</div>
	<div class="tab-pane" id="sampleContentC">
		<p>メニューCの内容</p>
	</div>
	<div class="tab-pane" id="sampleContentD">
		<p>メニューDの内容</p>
	</div>
</div>

広告