ブートストラップタブとピル
メニュー
ほとんどの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のタブとピルを使用して上記のメニューを表示することもできます（以下を参照）。
注：タブとピルを切り替え可能/動的にする方法については、このページの最後の例を参照してください。
タブ
タブは次のように作成され<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>
錠剤
ピルはで作成され<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>
垂直ピル
錠剤は縦に表示することもできます。.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>
連続した垂直ピル
文章...
文章...
文章...
次の例では、垂直ピルメニューを最後の列に配置します。そのため、大画面ではメニューが右側に表示されます。ただし、小さな画面では、コンテンツは自動的に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>
ドロップダウンメニュー付きの錠剤
ピルはドロップダウンメニューを保持することもできます。
次の例では、「メニュー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>
中央に配置されたタブとピル
タブとピルを中央揃え/位置合わせするには、.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>
トグル可能/ダイナミックタブ
家
痛み自体は重要ですが、痛みは脂肪症のプロセスによって強化されますが、私はそれを減らす時間を与えて、私がいくつかの素晴らしい仕事と痛みをするようにします。
タブを切り替え可能にするには、data-toggle="tab"各リンクに属性を追加します。.tab-pane次に、タブごとに一意のIDを持つクラスを
追加し、それら<div>をclassを持つ要素内にラップします.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>
トグル可能/ダイナミックピル
同じコードがピルにも適用されます。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>
完全なブートストラップナビゲーションリファレンス
すべてのナビゲーションクラスの完全なリファレンスについては、完全な Bootstrapナビゲーションリファレンスにアクセスしてください。
すべてのタブオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSタブリファレンスにアクセスしてください。