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

概要

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

今回の内容

• bootstrapの色について

bootstrapの色の種類

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

ボタン

    <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>

文字色

    <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>

背景色

    <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>

ラベル

    <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>

パネル

    <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はない

    <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が同じ色

    <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>