メニュー
ほとんどの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> あなたは上記のリストの水平方向のメニューを作成したい場合は、追加.list-inlineクラスをする<ul>
<ul class="list-inline"> »それを自分で試してみてください それとも、して上にメニューを表示することができますBootstraps' Tabs and Pills （下記参照します）。
注：タブとピルはトグル/動的にする方法を見つけるために、このページの最後の例を参照してください。
タブ
タブを使用して作成された<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>
»それを自分で試してみてください ドロップダウンメニューでタブ
タブはまた、ドロップダウンメニューを保持することができます。
次の例では、「メニュー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>
»それを自分で試してみてください Pills
ピルは使用して作成された<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> »それを自分で試してみてください 垂直Pills
Pillsまた、縦方向に表示することができます。 ただ、追加.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>
»それを自分で試してみてください 垂直Pills行で
テキスト...
テキスト...
テキスト...
次の例では、最後の列の内側に垂直ピルメニューを配置します。 だから、大画面でメニューが右側に表示されます。 しかし、小さな画面上で、コンテンツが自動的に単一列のレイアウトに自分自身を調整します。
例
<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> »それを自分で試してみてください Pillsドロップダウンメニューで
Pillsまた、ドロップダウンメニューを保持することができます。
次の例では、「メニュー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>
»それを自分で試してみてください 中央揃えTabs and Pills
中心に/タブと正当化pills使用し、 .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>
»それを自分で試してみてください トグル/ダイナミックTabs
HOME
Loremのイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。
タブのトグルを行うには、追加data-toggle="tab"の各リンクに属性を。 その後、追加.tab-paneすべてのタブの一意のIDを持つクラスをし、内部でそれらをラップし<div>クラスを持つ要素.tab-content 。
あなたがそれらをクリックするとタブがフェードインとフェードアウトしたい場合は、追加.fadeためにクラスを.tab-pane ：
例
<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>
»それを自分で試してみてください トグル/ダイナミックPills
同じコードは以下の製品に適用されpills 。 のみにデータトグル属性を変更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>
»それを自分で試してみてください 練習で自分自身をテスト！
完了してBootstrapナビゲーションリファレンス
すべてのナビゲーションクラスの完全なリファレンスについては、当社の完全に行くブートストラップナビゲーションリファレンス 。
すべてのタブオプション、メソッドおよびイベントの完全なリファレンスについては、当社に行くブートストラップJSタブリファレンス 。