HTML
CSS
bootstrap

bootstrapを使ってシンプルなWebページを作成する②〜ヘッダーとメインエリア〜

概要

今回の内容

  • どの画面でも共通になるようなページの雛形を紹介する

ナビゲーションバー

スクリーンショット 2017-10-27 0.17.04.png

index.html
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrapサンプル</a>
        </div>
      </div>
    </nav>
  </body>
  • 右の方にログインしてるユーザの名前を出したりなんかすることもよくある

スクリーンショット 2017-10-27 0.24.54.png

index.html
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrapサンプル</a>
        </div>
        <div class="collapse navbar-collapse" id="navigation">
          <p class="navbar-text navbar-right">ozaki25 さんでログイン中</p>
        </div>
      </div>
    </nav>
  </body>
  • 3行目のdivタグのclass属性がcontainer-fluidだとナビゲーションバーの文字は画面両端まで表示されるが、containerにすると画面幅が大きい場合程よく間隔をあける
    • 実際に動かしてウィンドウサイズをいじってもらった方がわかりやすい
  • containerにした場合のキャプチャ

スクリーンショット 2017-10-27 0.27.42.png

  • ナビゲーションバーには公式サイトにある通り、リンク等いろいろ設置できる

メインエリア

  • ナビゲーションバーに続いてメインエリアを書いていく
  • メインエリアはcontainerまたはcontainer-fluidをつけておくときれいに配置される
  • containerは左右にほどよく余白があいて、container-fluidは横幅いっぱいまでコンテンツが表示される
  • どちらを使うかはナビゲーションバーと揃えておくとよい

  • container-fluidの場合

スクリーンショット 2017-10-27 0.36.30.png

index.html
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrapサンプル</a>
        </div>
      </div>
    </nav>
    <div class="container-fluid">
      <h1>Hello!</h1>
    </div>
  </body>
  • containerの場合

スクリーンショット 2017-10-27 0.40.07.png

index.html
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrapサンプル</a>
        </div>
      </div>
    </nav>
    <div class="container">
      <h1>Hello!</h1>
    </div>
  </body>
  • 上記のどちらかが各ページの雛形になる
  • containerもしくはcontainer-fluidのついたタグの中にコンテンツを追加していくことになる

メインコンテンツの表示

  • 見出しをつけてコンテンツを表示したい場合パネルを使うときれいに表示できる

スクリーンショット 2017-10-27 1.01.28.png

index.html
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrapサンプル</a>
        </div>
      </div>
    </nav>
    <div class="container">
      <!-- ここからが追加した部分 -->
      <div class="panel panel-default">
        <div class="panel-heading">パネルの見出し</div>
        <div class="panel-body">
          <p>パネルの本文</p>
        </div>
      </div>
      <!-- ここまで -->
    </div>
  </body>

次回