ナビゲーションバーの作り方

こんな感じで作ります。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container-fluid">
        <ul class="nav">
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
    </div>
  </div>
</div>

区切り線、背景色、サイトID

  • .navbar-inverseを設定することでナビゲーションバーの背景色の設定ができます。(bootstrap.css)
    デフォルトはこの色です。
  • ナビゲーションの中に区切り線を入れる。<li class="divider-vertical"></li>
  • サイトIDを設定する。<a class="brand">Booststap</a>
    サイトIDはブラウザの幅を狭くしても表示される。

ナビゲーションをたたみ込む(レスポンシブ)

  • .nav-collapseクラスの付いたdivの中にある項目はブラウザの幅が狭いときは表示されません。
    幅が狭いときナビゲーションには表示されなくなりますがドロップダウンで表示することができます。
  • .navbar-fixed-topでナビゲーションを固定できます。