Bootstrap について

## 最初に :information_desk_person: 
CSS のフレームワークである Bootstrap について、
業務でよく使う使い方を、例を挙げて解説します。

※class などの説明だけで、インストール方法は割愛します

### Bootstrap とは？ :thinking: 
Webサイトなどのユーザインタフェース（UI）を作る場合、
HTML だけでなく、
スタイルシート（以降 CSS＝Cascading Style Sheets）や、
Javascript が必要になります。

HTML だけでも作れますが、
動的なサイトや、見た目が奇麗なサイトを作りたい場合は、
CSS と Javascript が必要になります。
* 料理で例えるなら、CSSが **凝った食器**、 Javascript が **調味料** でしょうか

ただ、これらを直接書くのはとても大変です。
なので、大抵の場合はフレームワーク※を利用します。
* ※1. 目的に応じたツールがあらかじめ用意されているセット。
  料理で例えるなら **ミールキット** でしょうか

Bootstrap は HTML、CSS、Javascript のフレームワークです。
* 以下、公式サイト
  https://getbootstrap.jp/

### このページで話すこと :speaking_head: 
Bootstrap は特に意識しなくても、大体のレイアウトは自動的に変えてくれます。

また、div 要素などの class 属性に特定の値を定義することで、色や形状を変えることができます。

次項以降で、よく使う class の定義について簡素に説明します。

## 背景の色指定 :art: 
ページの背景色だけでなく、ボタンの背景色、テーブルのセル色などを変える定義です。

`bg-xxxx`

+ xxxx の値
  - 赤色: danger :fire: 
  - 黄色: warning :zap: 
  - 緑色: success :green_heart: 
  - 水色: info :ocean:
  - 青色: primary :large_blue_diamond:
  - 薄灰色: light :grey_question:
  - 灰色: secondary :mortar_board: 
  - 白色: white :white_large_square: 

例：
```
<div class="bg-danger">ここは危険</div>
<div class="bg-success">ここは安全</div>
```

1. 色指定は変数のようなものなので「ダークな背景にしたい」などのときにも、変数だけ変えればサクッと実現可能
1. 場面に応じて色の表現を意識して使うと、より効果的です
    例：
      + 赤は重要な操作
      + 緑は結果、安全な操作
      + 水色は情報
      + 灰色は無効　など


## 文字の色指定 :art: 
文字の色を変える定義です。

`text-xxxx`

* xxxx の値は bg とほぼ同じ


## テーブル :black_large_square: :white_large_square: 
Excel のようなしっかりとしたレイアウトや、モダンな行形式を表現できます。

+ `table`: テーブルのレイアウト全体が変わります（必ず指定）
+ `table-hover`: 選択した列の色が反転します（今どこを選択しているかを視覚的に）
+ `table-striped`: 一列ごとに交互に色が変わります（見やすさ重視の場合）
+ `table-responsive`: レスポンシブになります（画面を小さくすると形状が変わる）
+ `compact`: テーブルの余白が減ります（Excelのように情報量が多いテーブルに）

例：
```
<table class="table table-hover table-striped table-responsive">
```

サンプル画像

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/4b88677e-c117-2f5d-e2d6-a04664287d85.png)



## カード :dividers: 
Bootstrap4 以降でよく使うレイアウトです。

丸みのある四角いボックス内に、ヘッダ、ボディ、フッタの内容を記載できます。

カードの入れ子もできるので、Word などのボックス型レイアウトを再現できます。

例：
```
<div class="card">
  <div class="card-header bg-info">
    これがヘッダ
    ページのタイトルや、注意書きなどを書く
    基本一行で
  </div>
  <div class="card-body">
    ここが本文
    コンテンツはここに書く
  </div>
  <div class="card-footer bg-light">
    フッタ
    あまり使わない
    参考情報などを書くときに
  </div>
</div>
```

サンプル画像

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/f9455fe5-0b50-4c3b-82ef-d4dea180f56c.png)



## 余白指定 :white_large_square: 
CSS には padding や margin といった余白指定がありますが、Bootstrap4 以降ではこれを class で指定できます。

例： padding の場合
+ `pr-4` は 右側(right) の padding を大きめに取る
  - `pl` は左側、`pt` は上、`pb` は下
  - `-数字` は余白のサイズ （1 - 5）
+ `p-2` は 上下左右 の padding を少な目に取る
+ `py` は上下、`px` は左右の padding をまとめて指定できる


例： margin の場合
+ 基本的には padding の場合と同じ使い方
+ こちらは要素の外側の余白を取る
+ 端的に言うと、テーブルの中の余白か、外の余白か、の違い


## レスポンシブ設計 :desktop_computer: :iphone: 
少し難しいので、慣れないうちは意識しなくて良いと思います。

Bootstrap は特に意識しなくても、自動的に画面サイズに応じてレイアウトを変えてくれるためです。

ただ、ページによっては、
「レイアウトを意図した形で維持したい」という場合があると思います。

この場合に使うのが `row` と `col-xxxx` `col-md-xxxx` などのクラス。


例： 以下の例の場合、フォームのスタイルを 4対8（名前4  `[textフォーム]`8）で維持してくれます。
```
<div class="row">
  <div class="col-4">名前: </div>
  <div class="col-8">[textフォーム]</div>
</div>
```

サンプル画像

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/1da8aa67-69ad-509d-1150-4fde8794298b.png)



例： 以下の例の場合、画面が小さくなると、要素が縦並びになります。
```
<div class="row">
  <div class="col-12 col-md-4">名前: </div>
  <div class="col-12 col-md-8">[textフォーム]</div>
</div>
```

※`col-12` で縦並び。 `col-md-xxxx` で画面サイズ中程度の場合に横並びにします

サンプル画像

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568441/8f9f4614-914f-ef06-61d8-23e599bab2db.png)