ナビゲーション Navs
ナビゲーション、タブ・メニュー、カプセル・メニューなどに適したスタイル。
サンプル
使い方
タブ・メニュー
カプセル・メニュー
縦型カプセル・メニュー
両端揃えタブ・メニュー
両端揃えカプセル・メニュー
リンクの無効化
ドロップダウン機能を持ったタブ・メニュー
ドロップダウン機能を持ったカプセル・メニュー
使い方
ポイントは４つ。
- タブ・メニューの場合は、
class属性に、nav nav-tabsを指定したul要素を用意する。そのul要素内にメニュー項目となるli要素を配置する。 - カプセル・メニューの場合は、
class属性に、nav nav-pillsを指定したul要素を用意する。そのul要素内にメニュー項目となるli要素を配置する。 - アクティブなメニュー項目の
li要素のclass属性にactiveを指定する。 - 両端揃えにする場合は、
ul要素のclass属性に、nav-justifiedを追加する。
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
タブ・メニュー
タブ・メニューの場合は、ul要素のclass属性にnav nav-tabsを指定する。
表示サンプル
ソースコード
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
カプセル・メニュー
カプセル・メニューの場合は、ul要素のclass属性にnav nav-pillsを指定する。
表示サンプル
ソースコード
<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
縦型カプセル・メニュー
縦型カプセル・メニューの場合は、ul要素のclass属性にnav nav-pills nav-stackedを指定する。
表示サンプル
ソースコード
<ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
両端揃えタブ・メニュー
両端揃えタブ・メニューの場合は、ul要素のclass属性にnav nav-tabs nav-justifiedを指定する。
表示サンプル
ソースコード
<ul class="nav nav-tabs nav-justified"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
両端揃えカプセル・メニュー
両端揃えタブ・メニューの場合は、ul要素のclass属性にnav nav-pills nav-justifiedを指定する。
表示サンプル
ソースコード
<ul class="nav nav-pills nav-justified"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
リンクの無効化
メニュー項目のli要素のclass属性にdisabledを指定する。
表示サンプル
ソースコード
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation" class="disabled"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul> <br> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation" class="disabled"><a href="#">メニューＡ</a></li> <li role="presentation"><a href="#">メニューＢ</a></li> </ul>
ドロップダウン機能を持ったタブ・メニュー
- ドロップダウン機能を持たせたいメニュー項目の
li要素のclass属性にdropdownを指定する。 - ドロップダウン機能を持たせたいメニュー項目の
li要素内のa要素のclass属性にdropdown-toggle、data-toggle属性にdropdownを指定する。 - ドロップダウン機能を持たせたいメニュー項目の
li要素内のa要素の下に、ドロップダウンで表示させるリンクリスト（ul要素）を配置する。 - リンクリスト（
ul要素）のclass属性にはdropdown-menuを指定する。
表示サンプル
ソースコード
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> ドロップダウン <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">リンクのリスト１</a></li> <li role="presentation"><a href="#">リンクのリスト２</a></li> <li role="presentation"><a href="#">リンクのリスト３</a></li> </ul> </li> <li role="presentation"><a href="#">メニュー</a></li> </ul>
ドロップダウン機能を持ったカプセル・メニュー
- ドロップダウン機能を持たせたいメニュー項目の
li要素のclass属性にdropdownを指定する。 - ドロップダウン機能を持たせたいメニュー項目の
li要素内のa要素のclass属性にdropdown-toggle、data-toggle属性にdropdownを指定する。 - ドロップダウン機能を持たせたいメニュー項目の
li要素内のa要素の下に、ドロップダウンで表示させるリンクリスト（ul要素）を配置する。 - リンクリスト（
ul要素）のclass属性にはdropdown-menuを指定する。
表示サンプル
ソースコード
<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">ホーム</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> ドロップダウン <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">リンクのリスト１</a></li> <li role="presentation"><a href="#">リンクのリスト２</a></li> <li role="presentation"><a href="#">リンクのリスト３</a></li> </ul> </li> <li role="presentation"><a href="#">メニュー</a></li> </ul>