bootstrap dashboard-layout 1

http://getbootstrap.com/examples/dashboard/

仕事で上記ページのような、上にナビゲーションバー、左にメインメニューのレイアウトの画面を作ることが多いのでその練習。

まずはナビゲーションバー。

前回のindex.html の body の先頭に以下を追加する。

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <span class="navbar-brand">SPA-Training</span>
    </nav>

navbar はナビゲーションバーであることを表すクラス
navbar-inverse は黒背景 (navbar-default にすれば灰色背景)
navbar-fixed-top はページ上部に固定
navbar-brand はタイトルとかに指定するクラス

ナビゲーションバーになにか適当に追加してみる

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <span class="navbar-brand">SPA-Training</span>
        <input type="text" placeholder="search" />
        <button type="button" class="btn btn-default navbar-btn">ボタン</button>
        <p class="navbar-text navbar-right">ユーザー</p>
      </div>
    </nav>

container-fluid はcontainer の流動的バージョン (ブラウザのサイズが変わると、containerは段階的に幅が変わるがcontainer-fluidはリニアに変化する)
試しにこれをcontainer-fluidではなくcontainerにしてブラウザを大きくしていくとSPA-Trainingの左に徐々に隙間ができていってある程度広がるとなくなりまた隙間が広がり... と段階的になってしまう。

navbar-right は右寄せ