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

## 概要

- [前回](https://qiita.com/ozaki25/items/37a31be60f169fbabbf9)の続き
- bootstrapのバージョンは3.7を使っている
- https://getbootstrap.com/docs/3.3
- 動作確認のための準備は[こちら](https://qiita.com/ozaki25/items/37a31be60f169fbabbf9#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86)

## 今回の内容

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

## ナビゲーションバー

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

<img width="784" alt="スクリーンショット 2017-10-27 0.17.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/601d20d4-f81f-9cca-c613-a5525d45a937.png">

```html: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>
```

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

<img width="818" alt="スクリーンショット 2017-10-27 0.24.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/6bc23068-3507-109a-9fef-f3dfcd8f777a.png">

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

<img width="845" alt="スクリーンショット 2017-10-27 0.27.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/08f7c0ec-d921-be34-8efc-f5579cf216bf.png">

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

## メインエリア

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

- `container-fluid`の場合

<img width="846" alt="スクリーンショット 2017-10-27 0.36.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/fa822499-34c1-5c00-5a5b-57a916b6a555.png">

```html: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`の場合

<img width="843" alt="スクリーンショット 2017-10-27 0.40.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/f059aed0-2ad8-3f20-e66d-8bac95387bf7.png">

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

## メインコンテンツの表示

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

<img width="799" alt="スクリーンショット 2017-10-27 1.01.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/5a2b3783-3572-983c-321e-25d11c042174.png">

```html: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>
```

## 次回

- 続きは[こちら](https://qiita.com/ozaki25/items/5212a8524f6c6ab85ce6)