Bootstrap 3 : Navbar

デフォルト

Navbarはサイトやアプリのナビゲーションヘッダーの役割を果たすレスポンシブな高次のコンポーネント。
モバイルビューでは折り畳まれ、切り替えが可能になる。
viewportの幅が広がるにつれ、横方向になる。

折り畳まれるポイントをカスタム:

どの時点で折り畳まれるか、または横に広がるかは@grid-float-breakpointを加筆修正してカスタム

JavaScriptが必要:

JavaScriptがないと、折り畳まれた時に .navbar-collapse内のコードを展開することができない。

.icon-barとかの役割

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

モバイルビューになったときに、トグルボタンの表示に使われる。

navbarの構成（スタティックの場合）

<!-- navbar の大枠 navbar全体のスタイルを指定 -->
<div class="navbar navbar-default navbar-static-top" role="navigation"> 

<!-- navbar の要素をページの中央に配置 -->
      <div class="container"> 

<!-- モバイルビューのとき、navbarのヘッダーになる。 -->
        <div class="navbar-header"> 

<!-- デスクトップでは表示されないが、モバイルのときはボタンとして表示される。 -->
<!-- `data-`類はJavaScriptでの制御に使われる。 -->
<!-- 無いとトグルがはたらかない -->
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
<!-- `navbar-toggle`は、モバイル以外では`display: none;`を指定するのみ -->
<!-- モバイルビューになると、トグルボタンになるように指定される -->

<!-- .sr-only はスクリーンリーダーにのみ表示。 -->
            <span class="sr-only">Toggle navigation</span>　
            <span class="icon-bar"></span><!-- モバイルビューのときボタンの横棒になる -->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span><
          </button>

<!-- 普段はnavbarの一部で、アプリの名前。-->
<!-- モバイルビューになるとヘッダーになりトグルボタンが横に表示される -->
          <a class="navbar-brand" href="#">Project name</a>
        </div>

<!-- navbar-collapse 内にあるものは、モバイル時に折り畳まれる。-->
<!-- `collapse`はビューの切り替えに使われる-->
<!-- `collapse` `collapsing` `in`の順に変わって、なめらかに表示する-->
        <div class="navbar-collapse collapse">

<!-- 普通のnav要素には`nav`-->
<!-- `navbar-nav`は、`navbar`内の普通の`nav`的要素を包むのにつけられる -->
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
<!-- ドロップダウン -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<!-- ドロップダウンメニューは`ul`にクラスをつける -->
              <ul class="dropdown-menu">
<!--中身はリスト-->
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
<!--空要素でクラスが`divider`は横線で区別するように使える -->
                <li class="divider"></li>
<!-- `.dropdown-header`で、メニューの説明 -->
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
<!-- `navbar-right` で右よせ -->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top</a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>