とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ナビゲーションバー

ナビゲーションバー

.navbar はナビゲーションバーを表示します。

<nav class="navbar navbar-dark bg-dark">
  <a href="#" class="navbar-brand">Navbar</a>
</nav>

背景色

.bg-* や background-color で背景色を指定します。背景が黒系の場合は .navbar-dark を白系の場合は .nabvar-light を指定します。これにより、テキストやアイコンの色が変わります。

<nav class="navbar navbar-dark bg-primary mb-2">
  <a href="#" class="navbar-brand">Primary</a>
</nav>
<nav class="navbar navbar-dark bg-dark mb-2">
  <a href="#" class="navbar-brand">Dark</a>
</nav>
<nav class="navbar navbar-light mb-2" style="background-color:#e3f2fd;">
  <a href="#" class="navbar-brand">Custom</a>
</nav>

テキスト

.navbar-text はテキストを表示します。

<nav class="navbar navbar-dark bg-dark">
  <span class="navbar-text">Text</span>
</nav>

ブランド

.navbar-brand はブランドを表示します。

<nav class="navbar navbar-dark bg-dark">
  <a href="#" class="navbar-brand">
    <img src="../image/popase.gif" width="30" height="30" alt="">
    Navbar
  </a>
</nav>

ナビゲーションメニュー

.navbar-toggler, data-toggle="collapse", data-target="#...", .navbar-toggler-icon, .navbar-collapse, .navbar-nav, .nav-item, .nav-link を用いてナビゲーションメニュー(別名ハンバーガーメニュー)を表示します。詳細は下記のサンプルを参照してください。

<nav class="navbar navbar-dark bg-dark">
  <a href="#" class="navbar-brand">Navbar</a>
  <button class="navbar-toggler" type="button"
      data-toggle="collapse"
      data-target="#navmenu1"
      aria-controls="navmenu1"
      aria-expanded="false"
      aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navmenu1">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Menu#1</a>
      <a class="nav-item nav-link" href="#">Menu#2</a>
      <a class="nav-item nav-link" href="#">Menu#3</a>
    </div>
  </div>
</nav>

レスポンシブデザイン

.nav-expand-{breakpoint} を指定すると、画面が狭い時はナビゲーションアイコンとして、画面が広い時はナビゲーションバー上にメニューを展開して表示します。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  ...
</nav>

アクティブ・ディスエイブル

.active は現在のページなどアクティブなメニューを、.disabled は無効化されたメニューを示します。

    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Menu#1</a>
      <a class="nav-item nav-link" href="#">Menu#2</a>
      <a class="nav-item nav-link disabled" href="#">Menu#3</a>
    </div>

フォーム

ナビゲーションメニュー内にフォームを表示する場合は .form-inline を使用してください。

ドロップダウン

ドロップダウンなどを表示することもできます。

表示位置

.fixed-top はページの最上部に、.fixed-bottom はページの最下部に表示します。

<nav class="navbar fixed-top navbar-dark bg-dark">
  ...
</nav>
<nav class="navbar fixed-bottom navbar-dark bg-dark">
  ...
</nav>

---