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

概要

前回の続き
bootstrapのバージョンは3.7を使っている
https://getbootstrap.com/docs/3.3
動作確認のための準備はこちら

今回の内容

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

ナビゲーションバー

画面の上部に表示されるナビゲーションバー
http://getbootstrap.com/docs/3.3/components/#navbar
最小構成だとこんな感じ

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>

右の方にログインしてるユーザの名前を出したりなんかすることもよくある

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にした場合のキャプチャ

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

メインエリア

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

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の場合

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のついたタグの中にコンテンツを追加していくことになる

メインコンテンツの表示

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

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>

次回

続きはこちら