トップページ >  Bootstrap >  Bootstrapのナビゲーションバー
初版2014/07/07： 最終更新日2014/07/07
  Bootstrapのナビゲーションバー
目次
・Bootstrapのナビゲーションバー
・Bootstrapのナビゲーションバー
・Bootstrapのナビゲーションバーのタイトル
・Bootstrapのナビゲーションバーを固定する
Bootstrapのナビゲーションバー
Bootstrapのナビゲーションバーを表示するには、ulのクラスにnav nav-tabs属性を追加します。
各liクラスにはアンカーを入れます。

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home">HOME</a></li>
    <li><a href="#company">会社概要</a></li>
    <li><a href="#inquiry">問い合わせ</a></li>
  </ul>
</div>

ナビゲーションバーのDEMOです。

Bootstrapのナビゲーションバー
Bootstrapにはもう一つナビゲーションバーを表示する方法があります。
まずdivタグのclass属性にnavbar navbar-defaultを追加します。

<div class="container">
  <div class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li><a href="#home">HOME</a></li>
      <li><a href="#company">会社概要</a></li>
      <li><a href="#inquiry">問い合わせ</a></li>
    </ul>
  </div>
</div>

ナビゲーションバーのDEMOです。

ただし、これだとどれがアクティブなのかよくわからないので、liのclassにactiveを追加すると背景色が変わります。

<div class="container">
  <div class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#home">HOME</a></li>
      <li><a href="#company">会社概要</a></li>
      <li><a href="#inquiry">問い合わせ</a></li>
    </ul>
  </div>
</div>

ナビゲーションバーのactive属性を使用したDEMOです。

Bootstrapのナビゲーションバーのタイトル
ナビゲーションバーにタイトルをつけることができます。ulと同じ階層にdiv要素を追加してclassにnavbar-headerを追加します。
そのdiv要素内にアンカーを記述するとタイトルになります。アンカーにはnavbar-brand属性追加する必要があります。

<div class="container">
  <div class="navbar navbar-default">
    <div class="navbar-header">
    <a href="#" class="navbar-brand">タイトル</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#home">HOME</a></li>
      <li><a href="#company">会社概要</a></li>
      <li><a href="#inquiry">問い合わせ</a></li>
    </ul>
  </div>
</div>

ナビゲーションバーのタイトルを使用したDEMOです。

Bootstrapのナビゲーションバーを固定する
ナビゲーションバーを上部、下部に固定することができます。
上部に固定するにはdiv要素にnavbar-fixed-topを追加します。
逆に下部に固定するにはdiv要素にnavbar-fixed-bottomを追加します。

<div class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
  <a href="#" class="navbar-brand">上部タイトル</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#home">HOME</a></li>
    <li><a href="#company">会社概要</a></li>
    <li><a href="#inquiry">問い合わせ</a></li>
  </ul>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="navbar-header">
  <a href="#" class="navbar-brand">下部タイトル</a>
  </div>
</div>

ナビゲーションバーの上部と下部に固定したDEMOです。

HOME