Navs（ナビゲーション）

ナビゲーションを表示します。
タブナビゲーション（Tabs）とピルナビゲーション（Pills）が指定できます。

サンプル01－ナビゲーション表示
サンプル02－均等サイズナビゲーション表示
サンプル03－ナビゲーションのリンクを無効化する
サンプル04－ナビゲーションにドロップダウンを表示する

サンプル01－ナビゲーション表示

タブナビゲーション表示

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

コーディング

.nav: 01行目　ナビゲーションとなるリスト表示を.navで囲みます
.nav-tabs: 01行目　ナビゲーションタイプをタブナビゲーションとするために.nav-tabsを指定します
.active: 02行目　選択中となるタブに.activeを指定します

ピルナビゲーション表示

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

コーディング

.nav: 01行目　ナビゲーションとなるリスト表示を.navで囲みます
.nav-tabs: 01行目　ナビゲーションタイプをピルナビゲーションとするために.nav-pillsを指定します
.active: 02行目　選択中となるタブに.activeを指定します
.nav-stacked: 06行目　ピルナビゲーションを縦表示にする場合は.nav-stackedを指定します

サンプル02－均等サイズナビゲーション表示

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

機能

表示するブロックの幅いっぱいを等分してナビゲーションを表示します
但し、ウィンドウサイズが携帯電話サイズ（768px未満）になった場合は縦に積まれて表示されます

コーディング

.nav-justified: 01・06行目　均等サイズ表示するナビゲーションに.nav-justifiedを指定します

サンプル03－ナビゲーションのリンクを無効化する

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="disabled"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="disabled"><a href="#">Messages</a></li>
</ul>

コーディング

.disabled: 04・09行目　無効化したいナビゲーションのリンクに.disabledを指定します

サンプル04－ナビゲーションにドロップダウンを表示する

タブナビゲーションにドロップダウンを表示する

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Messages <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

コーディング

.dropdown: 04-15行目　ドロップダウンを表示したいタブに.dropdown処理を記述します

ピルナビゲーションにドロップダウンを表示する

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Messages <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

コーディング

.dropdown: 04-15行目　ドロップダウンを表示したいピルに.dropdown処理を記述します