bootstrapを使ってシンプルなWebページを作成する⑤〜カラーバリエーション〜

## 概要

- [前回](https://qiita.com/ozaki25/items/90c8900faacfacf0d231)の続き
- 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)

## 今回の内容

- bootstrapの色について

### bootstrapの色の種類

- どのパーツもだいたい5色用意されている
- 見た目の色合いではなくて、class名の意味に合わせた使い方をすると統一感がでるしbootstrapの意図にも沿う

### ボタン

<img width="523" alt="スクリーンショット 2017-10-30 1.10.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/39ed81d9-fb5b-b325-3ea5-745cc2cad49c.png">

```html
    <div class="container">
      <button class="btn btn-default">default</button>
      <button class="btn btn-primary">primary</button>
      <button class="btn btn-success">success</button>
      <button class="btn btn-info">info</button>
      <button class="btn btn-warning">warning</button>
      <button class="btn btn-danger">danger</button>
    </div>
```

### 文字色

<img width="101" alt="スクリーンショット 2017-10-30 1.16.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/3ea27385-21c0-54ed-64d7-247448752481.png">


```html
    <div class="container">
      <p class="text-primary">primary</p>
      <p class="text-success">success</p>
      <p class="text-info">info</p>
      <p class="text-warning">warning</p>
      <p class="text-danger">danger</p>
    </div>
```

### 背景色

<img width="431" alt="スクリーンショット 2017-10-30 1.15.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/fabdb432-c786-996f-2e7b-0836ea5fd5f9.png">

```html
    <div class="container">
      <p class="bg-primary">primary</p>
      <p class="bg-success">success</p>
      <p class="bg-info">info</p>
      <p class="bg-warning">warning</p>
      <p class="bg-danger">danger</p>
    </div>
```

### ラベル

<img width="315" alt="スクリーンショット 2017-10-30 1.18.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/a546207a-d5e8-3aad-f014-f4e27e78b2eb.png">

```html
    <div class="container">
      <span class="label label-default">default</span>
      <span class="label label-primary">primary</span>
      <span class="label label-success">success</span>
      <span class="label label-info">info</span>
      <span class="label label-warning">warning</span>
      <span class="label label-danger">danger</span>
    </div>
```

### パネル

<img width="432" alt="スクリーンショット 2017-10-30 1.23.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/e40b8162-7a7c-cef7-2f30-24c6e05e8d72.png">

```html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">default</div>
        <div class="panel-body">panel-body</div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">primary</div>
        <div class="panel-body">panel-body</div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading">success</div>
        <div class="panel-body">panel-body</div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading">info</div>
        <div class="panel-body">panel-body</div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading">warning</div>
        <div class="panel-body">panel-body</div>
      </div>
      <div class="panel panel-danger">
        <div class="panel-heading">danger</div>
        <div class="panel-body">panel-body</div>
      </div>
    </div>
```

## アラート

- primaryはない

<img width="431" alt="スクリーンショット 2017-10-30 1.26.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/de5f02d5-77e8-229b-558e-3dcd2f25d75c.png">

```html
    <div class="container">
      <div class="alert alert-success">success</div>
      <div class="alert alert-info">info</div>
      <div class="alert alert-warning">warning</div>
      <div class="alert alert-danger">danger</div>
    </div>
```

## リストグループ

- primaryはないけどactiveが同じ色

<img width="431" alt="スクリーンショット 2017-10-30 1.29.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/eaae0e34-b45f-c88a-be83-be5a475c7916.png">

```html
    <div class="container">
      <ul class="list-group">
        <li class="list-group-item active">active</li>
        <li class="list-group-item list-group-item-success">success</li>
        <li class="list-group-item list-group-item-info">info</li>
        <li class="list-group-item list-group-item-warning">warning</li>
        <li class="list-group-item list-group-item-danger">danger</li>
      </ul>
    </div>
```