ぱそくま ろご
開発 > Bootstrap > Bootstrap ナビゲーションバー

Bootstrap ナビゲーションバー

Bootstrap ナビゲーションバー

Bootstrapではナビゲーションをちょっと応用して、ナビゲーションバーを作ることが可能です。 ナビゲーションバーには

  • ナビゲーションのタイトル
  • ナビゲーション
  • 検索窓等の入力欄

を入れることが可能です。作成の大まかな手順は以下の通りです。

  1. navタグに「class="navbar"」を指定し、ナビゲーションのエリアを作成(必須)。
  2. タイトルが必要な場合は、「class="navbar-brand"」を持つタグを追加。
  3. ナビゲーションのページにあるようにナビゲーションを追加。
  4. フォームが必要な場合は、formタグに「class="form-inline"」を使ってインライン用のフォームを追加。


例:Bootstrap ナビゲーションバー

<nav class="navbar bg-faded">
  <!-- タイトル部分(会社名とかサイト名とか) -->
  <p class="navbar-brand">ぱそくまr</p>

  <!-- ナビゲーション部分 -->
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">アクティブ</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">リンク</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">無効化</a>
    </li>
  </ul>

  <!-- 検索窓部分 -->
  <form class="form-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="サイト内検索">
    <button class="btn btn-outline-success" type="submit">検索</button>
  </form>
</nav>

Bootstrap ナビゲーションバーの表示例

ナビゲーションバーを展開式に

よくスマホのサイトで3本線アイコン(ハンバーガーボタン)が画面の上にあり、それをクリックするとメニューが展開するページがあると思います。 Bootstrapも同様なものがり、ナビゲーションバーに「class="navbar-toggler"」を持つbuttonタグを追加するだけです。

例:Bootstrap ハンバーガーボタン

<nav class="navbar bg-faded">

  <!--
  ハンバーガーボタン(.navbar-togglerを追加) 
  展開先のdivをdata-targetで指定します。
  -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#extendMenu">
    &#9776;&nbsp;Menu
  </button>

  <!-- 展開用の中身 -->
  <div class="collapse" id="extendMenu">
    <nav class="nav nav-stacked">
      <a class="nav-link active" href="#">アクティブ</a>
      <a class="nav-link" href="#">リンク</a>
      <a class="nav-link disabled" href="#">無効化</a>
    </nav>
  </div>

</nav>

Bootstrap ハンバーガーボタンの表示例

ナビゲーションバーの色をカスタマイズ

ナビゲーションバーの色をカスタマイズするには、単純にスタイルを適用するのもよいのですが、一応、Bootstrapにも用意されています。

背景色に関するクラス

クラス名 規定の色 Sassの変数名
bg-faded #f7f7f9 $gray-lightest
bg-primary #0275d8 $brand-primary
bg-success #5cb85c $brand-success
bg-info #5bc0de $brand-info
bg-warning #f0ad4e $brand-warning
bg-danger #d9534f $brand-danger
bg-inverse #373a3c $brand-inverse($gray-darkと同じ)

例えば、bg-primaryクラスを背景色に指定すると(<nav class="navbar bg-primary">)した用になります。

例:Bootstrapのナビゲーションバーの背景色を変えてみる