Bootstrapではタブナビゲーションが簡単に作成できます。
その作り方とオプションの付け方を解説します。
オプションの付け方
- 通常のタブナビゲーション。 class="active"を付けた個所が 選択されている状態になる。
- 一部タブにドロップダウンメニューを加えた場合、入れ子のulタグに class="dropdown-menu"を付けた個所が ドロップダウンメニューになる。
- aタグに data-toggle="tab" を付けると、 トグルになる。
- aタグのhref="#home"と class="tab-content" の中身のIDを紐づけると、 タブを選択するごとに連動する。
- ulタグにclass="nav-stackedを付けると、タブが縦に並ぶ。
- ulタグにclass="nav-justifiedを付けると、タブが横幅100%になる。
通常のタブナビゲーション
<section class="panel panel-default">
<div class="panel-heading">タブナビゲーション</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">ホーム</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー 1
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a data-toggle="tab" href="#menu1-1">サブメニュー1-1</a>
</li>
<li>
<a data-toggle="tab" href="#menu1-2">サブメニュー1-2</a>
</li>
<li>
<a data-toggle="tab" href="#menu1-3">サブメニュー1-3</a>
</li>
</ul>
</li>
<li><a data-toggle="tab" href="#menu2">メニュー 2</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>ホーム</h3>
<p>ホームのコンテンツが入ります。</p>
</div>
<div id="menu1-1" class="tab-pane fade">
<h3>メニュー 1-1</h3>
<p>メニュー 1-1のコンテンツが入ります。</p>
</div>
<div id="menu1-2" class="tab-pane fade">
<h3>メニュー 1-2</h3>
<p>メニュー 1-2のコンテンツが入ります。</p>
</div>
<div id="menu1-3" class="tab-pane fade">
<h3>メニュー 1-3</h3>
<p>メニュー 1-3のコンテンツが入ります。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>メニュー 2</h3>
<p>メニュー 2のコンテンツが入ります。</p>
</div>
</div>
</div>
</section>
角丸のタブナビゲーション
<section class="panel panel-default">
<div class="panel-heading">角丸タブナビゲーション</div>
<div class="panel-body">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#homes">ホーム</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー 1
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a data-toggle="tab" href="#menus1-1">サブメニュー1-1</a>
</li>
<li>
<a data-toggle="tab" href="#menus1-2">サブメニュー1-2</a>
</li>
<li>
<a data-toggle="tab" href="#menus1-3">サブメニュー1-3</a>
</li>
</ul>
</li>
<li><a data-toggle="tab" href="#menus2">メニュー 2</a>
</li>
</ul>
<div class="tab-content">
<div id="homes" class="tab-pane fade in active">
<h3>ホーム</h3>
<p>ホームのコンテンツが入ります。</p>
</div>
<div id="menus1-1" class="tab-pane fade">
<h3>メニュー 1-1</h3>
<p>メニュー 1-1のコンテンツが入ります。</p>
</div>
<div id="menus1-2" class="tab-pane fade">
<h3>メニュー 1-2</h3>
<p>メニュー 1-2のコンテンツが入ります。</p>
</div>
<div id="menus1-3" class="tab-pane fade">
<h3>メニュー 1-3</h3>
<p>メニュー 1-3のコンテンツが入ります。</p>
</div>
<div id="menus2" class="tab-pane fade">
<h3>メニュー 2</h3>
<p>メニュー 2のコンテンツが入ります。</p>
</div>
</div>
</div>
</section>
縦に並べる角丸タブナビゲーション
<section class="panel panel-default">
<div class="panel-heading">縦に並べる角丸タブナビゲーション</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">ホーム</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
</section>
タブの横幅を100%にする
<section class="panel panel-default">
<div class="panel-heading">タブの横幅を100%にする</div>
<div class="panel-body">
<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>
<br>
<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>
</div>
</section>
