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>