ほとんどの Web ページには、何らかのメニューがあります。
HTML では、次のように、メニューの多くは順序なしリスト <ul> （とその後のスタイル）で定義されています：
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
上記リストの横向きメニューを作成したい場合は、<ul> へ
.list-inline クラスを追加します：
<ul class="list-inline">
Try it Yourself »
または、Bootstraps のタブとピルで上記メニューを表示できます（下記参照）。
注: タブとピルを、どのように toggable/dynamic にするかは、このページの最後の例を見てください。
タブは、<ul class="nav nav-tabs"> で作成します：
チップ: また、<li class="active"> で現在のページをマークします。
次の例は、ナビゲーションタブを作成します：
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Try it Yourself »
タブは、ドロップダウン・メニューを持つこともできます。
次の例は、"Menu 1" にドロップダウンメニューを追加します：
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Try it Yourself »
ピルは、<ul class="nav nav-pills"> を使用して作成します。
また、<li class="active"> で現在のページをマークします：
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Try it Yourself »
ピルも縦に表示することができます。単に .nav-stacked クラスを追加するだけです：
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Try it Yourself »
Text...
Text...
Text...
次の例は、最後のカラム内に縦型のピルメニューを配置しています。そのため、大型画面ではメニューが右側に表示されます。 しかし、小型画面では、コンテンツを 1 カラムのレイアウトに自動調整します：
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
Try it Yourself »
ピルも、ドロップダウンメニューを持つことができます。
次の例は、"Menu 1" にドロップダウンメニューを追加します：
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Try it Yourself »
タブとピルの中央揃え/両端揃えには、.nav-justified クラスを使用します。
768px 未満の画面では、リスト項目は（コンテンツは中央揃えのまま）積上げられます：
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Try it Yourself »
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
タブをトグル可能にするには、各リンクに data-toggle="tab" 属性を追加します。
次に、全てのタブにユニークな ID と共に .tab-pane クラスを追加し、それを
クラス .tab-content を持った <div> 要素でラップします。
タブをクリックしたときに、フェードインやフェードアウトしたい場合は、.tab-pane に
.fade クラスを追加します：
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Try it Yourself »
同じコードがピルにも適用できます；data-toggle 属性を data-toggle="pill" に変更するだけです：
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
すべてのナビゲーションクラスの完全なリファレンスについては、 Bootstrap ナビゲーション・リファレンスをご覧ください。
すべてのタブ・オプション、メソッドおよびイベントの完全なリファレンスについては、 Bootstrap JS タブ・リファレンスをご覧ください。