Bootstrap初期学習メモ

##グリッド
#####横幅を12分割として簡単に要素の幅を指定できる
`col-[画面サイズ]-[カラム数]`

||col-xs-数|col-sm-数|col-md-数|col-lg-数|
|---|---|---|---|---|
|ウィンドウ幅|〜767px|〜991px|〜1199px|1200px〜|

#####要素同士の隙間を開ける場合
`col-[画面サイズ]-offset-[カラム数]`

```html:記入例
<div class="row">
  <div class="col-sm-5">col-sm-5</div>
  <div class="col-sm-offset-2 col-sm-5">col-sm-5</div>
</div>
```

#####メディアクエリ
メディアクエリを使うと特定の表示環境に対してだけCSSを適用。
下記の記述でウィンドウを大きくしたり小さくしたりするだけで背景の色が変わる。

```css:記入例
body { background-color: #000; }
/* ウインドウ幅500px以上の時に適用されるスタイル */
@media (min-width: 500px) { body { background-color: #f00; } }
/* ウインドウ幅750px以上の時に適用されるスタイル */
@media (min-width: 750px) { body { background-color: #0f0; } }
/* ウインドウ幅1000px以上の時に適用されるスタイル */
@media (min-width: 1000px) { body { background-color: #00f; } }
```

#####レスポンシブデザイン
多様な画面サイズに適応するよう配慮しながらページを制作する手法
<font color="Red">基本的にモバイル向けのレイアウト優先で制作する</font>

##Bootstrapの書き方
#####テーブル
`<table>` + `class="table"`

`<table　class="table"></table>` を記述

```html:記入例
<table class="table">
  <tr>
    <th class="text-center">A</th>
    <th class="text-center">B</th>
    <th class="text-center">C</th>
  </tr>
  <tr>
    <td class="text-center">A-1</td>
    <td class="text-center">B-1</td>
    <td class="text-center">C-1</td>
  </tr>
  <tr>
    <td class="text-center">A-2</td>
    <td class="text-center">B-2</td>
    <td class="text-center">C-2</td>
  </tr>
  <tr>
    <td class="text-center">A-3</td>
    <td class="text-center">B-3</td>
    <td class="text-center">C-3</td>
  </tr>
</table>
```

【表示】
<img width="499" alt="スクリーンショット 2019-09-02 16.24.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/3d037172-2879-c1c0-5e14-cbe0ecc1bb48.png">

・テーブルの見た目変更

`<table　class="table ※"></table>`　<font color="Red">※部分に記入</font>

|クラス|効果|
|---|---|
|table-striped|行ごとに背景色が交互に変わる|
|table-bordered|各セルに枠が付く|
|table-hover|マウスを乗せると行がハイライトされる|
|table-condensed|余白を詰めてコンパクトに|

#####かっこいいフォーム
`<input>` + `form-control`

`<input type="text" class="form-control">` を記述

```html:記入例
<form>
  氏名<input type="text" class="form-control">
</form>
```

【表示】
<img width="563" alt="スクリーンショット 2019-09-02 16.45.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/92f693d1-8662-66b5-c8d6-b03f19e3c64d.png">

・複数の要素をグリット用のクラスで配置を整えるには（グリットについては上記参照）

`<form>` + `form-horizontal`

`<form class="form-horizontal"></form>` で囲う

#####アクセサリをつける方法

親要素`<div class="input-group"></div>`で囲って`<span class="input-group-addon"></span>`を使う

```html:記入例
<form>
  郵便番号
  <div class="input-group">
    <span class="input-group-addon">〒</span>
    <input type="text" class="form-control" placeholder="000-0000">
  </div>
</form>
```

【表示】
![スクリーンショット 2019-09-02 17.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/dabe3373-ea0a-2e37-b34d-3275d843c6aa.png)

#####Bootstrap風の見た目のボタン
`<button class="btn btn-default" type="submit"></button>` を記述

```html:記入例
<button class="btn btn-default" type="submit">buttonボタン</button>
```

【表示】
<img width="68" alt="スクリーンショット 2019-09-02 17.14.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/af31ced1-94c0-e027-6f78-ff12a5750443.png">

・`<button class="btn ※" type="submit"></button>` ※に別の記述を入れるとボタンの見た目変更可能

`btn btn-default　（白）, btn btn-primary （青）, btn btn-success （緑）, btn btn-info （水色）, btn btn-warning （橙）, btn btn-danger （赤）`

#####アイコンを使う

classを指定する　`例　<span class="※"></span>`
<font color="Red">※にリンク先のアイコンしたにある名前をコピペでOK</font>
https://getbootstrap.com/docs/3.3/components/#glyphicons

```html:記入例
<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-off"></span>
  起動
</button>
```

【表示】
<img width="75" alt="スクリーンショット 2019-09-02 17.40.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/80a87799-73fa-bd63-5dd2-7b74c999fe69.png">

#####ドロップダウン

```html:記入例
<div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    select<span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">C</a></li>
  </ul>
</div>
```

【表示】
<img width="164" alt="スクリーンショット 2019-09-02 17.49.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/e987a26b-424c-14c4-57d7-63f537e14c7a.png">

#####タブ

```html:記入例
<ul class="nav nav-tabs">
  <li class="active"><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a></li>
</ul>
```

【表示】
<img width="184" alt="スクリーンショット 2019-09-02 17.55.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/3582aa5d-d3b0-dc70-5864-e6469b258cc2.png">

#####ナビゲーションバー
サイトの上部につくメニュー。長いのでカリキュラム参照

#####ラベル
テキストの装飾

```html:記入例
<span class="label label-default">A</span>
<span class="label label-primary">B</span>
<span class="label label-success">C</span>
<span class="label label-info">D</span>
<span class="label label-warning">E</span>
<span class="label label-danger">F</span>
```

【表示】
<img width="137" alt="スクリーンショット 2019-09-02 18.05.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/fa219583-7f10-e2a2-d1a0-1093261cdef2.png">


#####バッジ

新着通知の件数などを表示

```html:記入例
<button class="btn btn-success" type="button">
  新着情報 <span class="badge">2</span>
</button>
```

【表示】
<img width="118" alt="スクリーンショット 2019-09-02 18.40.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/8c1da5ee-a004-7e32-5c6d-67402b0bf3cc.png">

#####アラート

```html:記入例
<div class="alert alert-success" role="alert">新着情報があります</div>
```

【表示】
<img width="571" alt="スクリーンショット 2019-09-02 18.43.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/0f0fca8c-6bd5-b181-ed59-f8603ecf6e04.png">


#####パネル
情報のグループ化

```html:記入例
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">新着情報</h3>
  </div>
  <div class="panel-body">
    <ul class="list-unstyled">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>
  </div>
</div>
```

【表示】
<img width="569" alt="スクリーンショット 2019-09-02 18.49.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486524/1fb7f4ef-289b-edf6-fba9-37b0127a76dc.png">

##他
#####スクロールスパイ

コンテンツのスクロールに合わせてナビゲーションメニューのハイライトを変更してくれる機能
長いのでカリキュラム参照

#####画像を簡単にフィットするように加工可能

##機能一覧
https://getbootstrap.com/docs/3.3/components/

Bootstrapはカスタマイズも可能
https://getbootstrap.com/docs/3.4/customize/