ナビバー

ナビゲーションバー

ナビゲーションバーは、ページの上部に配置されるメニューです。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

注：このページの例では、小さな画面では小さな画面に合わないナビゲーションバーが表示されます。この問題は、このページの最後の例で解決します。

色の反転

デフォルトのナビゲーションバーのスタイルが気に入らない場合、Bootstrapは代替の黒いナビゲーションバーを提供します。

.navbar-default から .navbar-inverse に変更します。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

ナビバーとドロップダウン

ナビバーにドロップダウンメニューを追加することもできます。

次の例では、「Page 1」にドロップダウンメニューを追加します。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

右寄せ

ナビゲーションバーのボタンを右揃えにするには、 .navbar-right クラスを使用します。

次の例では、ナビゲーションバーの右側に「Sign Up」ボタンと「Login」ボタンを挿入します。また、2つの新しいボタンのそれぞれにグラフィックアイコンを追加します。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

ナビバーボタン

ナビゲーションバー内にボタンを追加するには、ボタンに .navbar-btn クラスを追加します。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>

ナビバーフォーム

フォーム要素をナビバー内に追加するには、フォーム要素に .navbar 形式のクラスを追加します。
.form-group クラスを持つ <div> を追加したことに注意してください。複数の入力がある場合は、これにより適切な埋め込みが追加されます（フォームの章で詳しく説明しています）。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>

また、 .input-group クラスと .input-group-addon クラスを使用して、入力フィールドの隣にアイコンまたはヘルプテキストを添付することもできます。これらのクラスの詳細については、「インプット」の章を参照してください。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
  </div>
</nav>

ナビバーテキスト

.navbar-text クラスを使用して、リンクではないテキストを追加します。

<nav class="navbar navbar-inverse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <p class="navbar-text">テキスト</p>
</nav>

ナビバーの固定

ナビゲーションバーは、ページの上部または下部に固定することもできます。
固定ナビゲーションバーは、ページスクロールとは独立した固定位置（上または下）に表示されたままになります。
.navbar-fixed-top クラスはナビゲーションバーを一番上に固定します。
.navbar-fixed-bottom クラスはナビゲーションバーを一番下に固定します。

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

ナビバーの折りたたみ

ナビゲーションバーは、小さな画面では余分なスペースを占めます。
小さな画面ではナビゲーションバーを非表示にして、代わりにハンバーガーメニューを表示します。

次の例では、小さな画面で見た場合、ナビゲーションバーが右上隅のハンバーガーメニューに置き換えられます。ボタンをクリックしたときにのみ、ナビゲーションバーが表示されます。

このサイトのデザイン上、デスクトップ等の大きい画面ではメニューが表示されません。
ウィンドウを小さくするとハンバーガーメニューが表示されます。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Bootstrap3 チュートリアル</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>