Bootstrapで利用できるナビゲーションは、 状態だけでなく基盤となる.navクラスを始めとしたマークアップが共有されています。 修飾クラス入れ替えることで、各スタイルを切り替えます。

• タブ
• ピル
• 均等化
• リンクの無効化
• ドロップダウンの使用

タブ

.nav-tabsクラスは、基盤となる.navクラスを必要とすることに注意してください。

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

ピル

同じHTMLを使用していますが、代わりに.nav-pillsを使用しています。

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

ピルは垂直方向に積み重ねることも可能です。 その場合は、.nav-stackedを追加するだけです。

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

均等化

768pxより大きい幅のスクリーンで.nav-justifiedを使用して、 タブまたはピルを簡単に親要素の幅と同じにすることが出来ます。 小さいスクリーンでは、ナビゲーションのリンクは垂直方向に積まれます。

ナビゲーションバー(nav)のリンクの均等化は、現在サポートされていません。

Safariとレスポンシブでのナビゲーションの均等化について
Safariのv8.0では、ブラウザを水平方向にサイズ変更すると、均等化されたナビゲーションで描画エラーが発生し、 リフレッシュすると元に戻るというバグが報告されています。 このバグは、均等化ナビゲーションの例でも確認することができます。

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

リンクの無効化

ナビゲーションのコンポーネント(タブまたはピル)に.disabledを追加するとリンクが灰色になり、 hoverのエフェクトが無くなります。

リンク機能へは影響を与えません
このクラスは<a>の外見のみを変更し、その機能に対しては何も行いません。 リンクを無効化するには、JavaScriptを使用してください。

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

ドロップダウンの使用

HTMLを拡張し、ドロップダウンのJavaScriptプラグインを使用することで、 ドロップダウンメニューを追加します。

ドロップダウン付きのタブ

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ドロップダウン付きのピル

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

 Back to top