Navs(ナビゲーション)
ナビゲーションを表示します。
タブナビゲーション(Tabs)とピルナビゲーション(Pills)が指定できます。
サンプル01-ナビゲーション表示
タブナビゲーション表示
コーディング
- .nav
- 01行目 ナビゲーションとなるリスト表示を.navで囲みます
- .nav-tabs
- 01行目 ナビゲーションタイプをタブナビゲーションとするために.nav-tabsを指定します
- .active
- 02行目 選択中となるタブに.activeを指定します
ピルナビゲーション表示
コーディング
- .nav
- 01行目 ナビゲーションとなるリスト表示を.navで囲みます
- .nav-tabs
- 01行目 ナビゲーションタイプをピルナビゲーションとするために.nav-pillsを指定します
- .active
- 02行目 選択中となるタブに.activeを指定します
- .nav-stacked
- 06行目 ピルナビゲーションを縦表示にする場合は.nav-stackedを指定します
サンプル02-均等サイズナビゲーション表示
機能
表示するブロックの幅いっぱいを等分してナビゲーションを表示します
但し、ウィンドウサイズが携帯電話サイズ(768px未満)になった場合は縦に積まれて表示されます
コーディング
- .nav-justified
- 01・06行目 均等サイズ表示するナビゲーションに.nav-justifiedを指定します
サンプル03-ナビゲーションのリンクを無効化する
コーディング
- .disabled
- 04・09行目 無効化したいナビゲーションのリンクに.disabledを指定します
サンプル04-ナビゲーションにドロップダウンを表示する
タブナビゲーションにドロップダウンを表示する
コーディング
- .dropdown
- 04-15行目 ドロップダウンを表示したいタブに.dropdown処理を記述します
ピルナビゲーションにドロップダウンを表示する
コーディング
- .dropdown
- 04-15行目 ドロップダウンを表示したいピルに.dropdown処理を記述します