• デフォルトのナビゲーションバー
• ブランド画像
• フォーム
• ボタン
• テキスト
• 非ナビゲーションリンク
• コンポーネントの右寄せ・左寄せ
• 最上部へ固定
• 最下部へ固定
• 静的な最上部のナビゲーションバー
• デザインの暗転

デフォルトのナビゲーションバー

ナビゲーションバーは高度なレスポンシブ・コンポーネントであり、 アプリケーションやサイトに対してナビゲーションヘッダーとして提供されます。 これらはモバイルの表示上では垂直方向に積まれ始め(切り替えることも可能)、 ビューポート幅が増加すると水平方向に並べられます。

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

モバイルでナビゲーションバーを崩す区切り位置の変更
ナビゲーションバーは、ビューポートが@grid-float-breakpointより狭い場合に、 そのモバイル表示の垂直方向へ崩れます。 ナビゲーションバーを崩す際/展開する際の制御を行うには、Lessソース内のこの変数を調整してください。 デフォルト値は768px(最小の"small"または"tablet"スクリーン)になります。

ナビゲーションバーをアクセシブルにする
<nav>要素を使用するか、 または、もし<div>のような、より一般的な要素を使用するのであれば、 各ナビゲーションバーにrole="navigation"を追加し、 支援技術を使用するユーザーに対して、その領域が何であるかが明確に識別されるようにしてください。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ブランド画像

テキストを<img>に入れ替えることで、任意の画像を使用した自身のブランドに置き換えます。 .navbar-brandは自身のpaddingとheightを持つため、 画像に依存する幾つかのCSSを上書きする必要があるかもしれません。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

フォーム

フォーム要素は、狭いビューポートで適切に垂直方向に並べられる(崩れる)ように、.navbar-form内に配置します。 alignmentのオプションを使用して、ナビゲーションバー内のどこに配置するのかを決定します。

.navbar-formはmixinを介して.form-inlineと多くのコードを共有することに注意してください。 inputグループのような幾つかのフォーム要素では、ナビゲーションバー内で適切に表示させるために、 固定幅にする必要があるかもしれません。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

携帯デバイスにおける警告
携帯デバイスにおいて、固定要素内でのフォーム要素の使用について、幾つか注意事項があります。 詳細については、ブラウザのサポートドキュメントを参照してください。

ボタン

<form>内では無い場所では、 ナビゲーションバー内で垂直方向に対して中央揃えにするために、 .navbar-btnクラスを<button>要素に追加します。

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

コンテキスト固有の使用
標準のボタンクラスのように、 .navbar-btnは<a>と<input>で使用することが可能です。 ただし、.navbar-nav内では、.navbar-btnも標準ボタンクラスも、 どちらも<a>上で使用されるべきではありません。

テキスト

.navbar-text付きの要素でテキストの文字列を囲みます。 適切な見出しと配色のために、通常は<p>タグが使われます。

<p class="navbar-text">Signed in as Mark Otto</p>

非ナビゲーションリンク

通常のナビゲーションバー内のリンクでは無い、標準のリンクを使用するには、 デフォルトと暗転オプションのために、適切な配色を追加する.navbar-linkクラスを使用します。(翻訳に自信なし)

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

コンポーネントの右寄せ・左寄せ

ナビゲーションのリンク、フォーム、テキストを、 .navbar-leftまたは.navbar-rightのユーティリティクラスを使用して揃えます。 どちらのクラスも、指定された方向にCSSのfloatを追加します。 例えば、ナビゲーションのリンクを寄せる場合は、 それぞれのユーティリティクラスが適用された別々の<ul>に対して、それらリンクを配置します。

これらのクラスは、.pull-leftと.pull-rightがmixin化されたものですが、 デバイスのサイズを跨いで、ナビゲーションバーのコンポーネントを簡単に扱えるように、メディアクエリーを詳しく調べます。(翻訳に自信なし)

複数コンポーネントの右寄せ
ナビゲーションバーは現在、複数の.navbar-rightクラスの使用に制限があります。 コンテンツの空間を適切にするために、最後の.navbar-right要素でネガティブマージンを使用しています。 このクラスを使用した複数の要素が存在する場合、これらのマージンは意図したように動作しません。 我々はv4でコンポーネントを書き直す際に、このことを再検討する予定です。

最上部へ固定

.navbar-fixed-topを追加して、中央へ.containerまたは.container-fluidを含め、 ナビゲーションバーの内容を詰めこみます。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

body { padding-top: 70px; }

最下部へ固定

.navbar-fixed-bottomを追加し、.containerまたは.container-fluidを中央へ含め、 ナビゲーションバーの内容を詰めこみます。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

body { padding-bottom: 70px; }

静的な最上部のナビゲーションバー

.navbar-static-topを追加することで、 スクロールでページ上から離れていく(見えなくなる)全体幅のナビゲーションバーを作成し、 中央へ.containerまたは.container-fluidを含め、 ナビゲーションバーの内容を詰めこみます。

.navbar-fixed-*クラスとは違い、bodyのpaddingを変更する必要はありません。

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

デザインの暗転

.navbar-inverseを追加することで、ナビゲーションバーの見た目を変更します。

<nav class="navbar navbar-inverse">
  ...
</nav>

 Back to top