【今日から携わる】丸わかりbootstrap入門（簡単テンプレと指定の方法・リファレンス）

# はじめに
仕事でBootstrap 4.1を使ったコーディングに携わることになったため、必要な知識を共有します。

# 簡単な使い方

## 準備
Bootstrap 4 ドキュメントから[Starter template](https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template)
をコピー（次のindex.htmlをコピーしてもよし）


## index.htmlを作成
```html:index.html
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>
```
これで準備完了！



# レイアウト

## container-fluid
PC：横幅100%
SP：横幅100%

## container
PC：左右の余白あり
SP：横幅100%


```css:style.css
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 1200px){
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 992px){
    .container {
        max-width: 960px;
    }
}
@media (min-width: 768px){
    .container {
        max-width: 720px;
    }
}
@media (min-width: 576px){
    .container {
        max-width: 540px;
    }
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

```





## 余白の指定

### ▼.my-n

.m{方向}-{大きさ}　：　マージン余白のつけかた
.p{方向}-{大きさ}　：　パディング余白のつけかた

{方向}
t : top
b : bottom
l : left
r : right
x : left と right
y : top と bottom

{大きさ}
0 : 0rem
1 : 0.25rem
2 : 0.5rem
3 : 1rem
4 : 1.5rem
5 : 3rem

### ▼.w-100
余白の大きさを%で指定することもできる
.w-25/50/75/100　 : 幅（%）
.h-25/50/75/100 : 高さ（%）
.mw-100 : 最大幅（%）
.mh-100 : 最大高さ（%）

### ▼.my-sm-1
SP時の上下の余白を小さくする指定もできる

.m{方向}-{ブレークポイント}-{大きさ}　




## レイアウト

### ▼row（親に指定）の使いかた

例）`.container>.row>.col-4*3`

```html:index.html
    <div class="container">
        <div class="row">
            <div>要素１</div>
            <div>要素２</div>
            <div>要素３</div>
            <div>要素４</div>
            <div>要素５</div>
            <div>要素６</div>
        </div>
        <hr>
        <div class="row">
            <div class="col-sm">要素１</div>
            <div class="col-sm">要素２</div>
            <div class="col-sm">要素３</div>
        </div>
        <hr>
        <div class="row">
            <div class="col-4 border">要素１</div>
            <div class="col-4 border">要素２</div>
            <div class="col-4 border">要素３</div>
        </div>
    </div>
```


PC時
![スクリーンショット 2018-09-14 0.43.24.png](https://qiita-image-store.s3.amazonaws.com/0/254652/fda675b2-62d8-7b5e-fdae-b146dfe67d96.png)

SP時
![スクリーンショット 2018-09-14 0.44.18.png](https://qiita-image-store.s3.amazonaws.com/0/254652/4c859a54-8200-273d-2c37-56c8c3a6d3d4.png)

```css:style.css
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
@media (min-width: 576px){
.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    }
}
.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.border {
    border: 1px solid #dee2e6!important;
}
```


|576px未満 |576px以上 |768px以上 |992px以上 |1200px以上 |
|---|---|---|---|---|
|max-width|なし |540px |720px | 960px|1140px |
|class  |.col（xs）  |.col-sm |.col-md |.col-lg |.col-xl|

Extra small（bp:< 576px、width:100%）
Small（≥ 576px、width:540px）
Medium（≥ 768px、width:720px）
Large（≥ 992px、width:960px）
Extra Large（≥ 1200px、width:1140px）

### ▼col-1（子要素に指定）のcss

```css:style.css
.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}
.col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
```

#### ▼.no-gutters
子要素colの余白の削除（親要素.rowに.no-guttersを加える）

```css:style.css
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>.col, .no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}
```


#### ▼.justify-content-center
row　＋　横方向の指定（親）
.justify-content-start ： 左寄せ
.justify-content-center ： 中央寄せ
.justify-content-end ： 右寄せ
.justify-content-around ： 左右に余白を開け等間隔に配置
.justify-content-between ： 等間隔に配置

```css:style.css
.justify-content-start {
    justify-content: flex-start!important;
}
.justify-content-center {
    justify-content: center!important;
}
.justify-content-end {
    justify-content: flex-end!important;
}
.justify-content-around {
    justify-content: space-around!important;
}
.justify-content-between {
    justify-content: space-between!important;
}
```

#### ▼.align-items-cente
row　＋　縦方向の指定（親）
.align-items-start：上寄せ
.align-items-center：中央寄せ
.align-items-end：下寄せ

```css:style.css
.align-items-start {
    align-items: flex-start!important;
}
.align-items-center {
    align-items: center!important;
}
.align-items-end {
    align-items: flex-end!important;
}
```

#### ▼.align-self-center
row　＋　縦方向の指定（子）
.align-self-start：上寄せ
.align-self-center：中央寄せ
.align-self-end：下寄せ

```css:style.css
.align-self-start {
    align-self: flex-start!important;
}
.align-self-center {
    align-self: center!important;
}
.align-self-end {
    align-self: flex-end!important;
}
```

#### ▼.d-sm-none
displayの指定
.d-{value}：xsの指定
.d-{breakpoint}-{value}：sm、md、lg、xlの指定

{value}：none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex
{breakpoint}：sm、md、lg、xl


## 見出しの指定

#### h1

```html:html
    <div class="container">
        <h1>h1（見出し）(2.5rem = 40px)</h1>
        <h2>h2（見出し）(2rem = 32px)</h2>
        <h3>h3（見出し）(1.75rem = 28px)</h3>
        <h4>h4（見出し）(1.5rem = 24px)</h4>
        <h5>h5（見出し）(1.25rem = 20px)</h5>
        <h6>h6（見出し）(1rem = 16px)</h6>
        <p>pタグ(1rem = 16px)</p>
    </div>
```

下側にのみ、マージン余白がつく仕様

```css:css
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}
```

その他の見出しの大きさ設定

```css:css
.display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}
```

#### .font-weight-bold
その他の見出し設定
.font-weight-bold : 太字
.font-weight-normal : 普通
.font-weight-light : 細字
.font-italic : イタリック
.small : テキスト85%
.text-left : 左寄せ
.text-center : 中央寄せ
.text-right : 右寄せ
.text-nowrap : テキストの折り返ししない
.sup：上付き文字
.sub：下付き文字


## 画像の配置
### 画像＋テキストの配置

```html:html
<div class="media mt-2">
    <img class="mr-2" src="http://placehold.jp/24/cc9999/993333/150x100.png" width="60">
    <div class="media-body">
        <h5 class="mt-0">子見出し</h5>
        <p>本文</p>
    </div>
</div>
```

![スクリーンショット 2018-09-14 2.01.29.png](https://qiita-image-store.s3.amazonaws.com/0/254652/3c86361f-0696-fc47-111a-cbf2db91608c.png)

```css:css
.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}
.media-body {
    -ms-flex: 1;
    flex: 1;
}

```

## 文字色
### text-primary
![スクリーンショット 2018-09-14 2.12.11.png](https://qiita-image-store.s3.amazonaws.com/0/254652/799b5d33-4895-e644-1493-05264d516adf.png)


```css:css
.text-muted {
    color: #6c757d!important;
}
.text-primary {
    color: #007bff!important;
}
.text-success {
    color: #28a745!important;
}
.text-info {
    color: #17a2b8!important;
}
.text-warning {
    color: #ffc107!important;
}
.text-danger {
    color: #dc3545!important;
}
.text-secondary {
    color: #6c757d!important;
}
.text-white {
    color: #fff!important;
}
.text-dark {
    color: #343a40!important;
}
.text-light {
    color: #f8f9fa!important;
}

```


## 背景色
### bg-primary
![スクリーンショット 2018-09-14 2.13.07.png](https://qiita-image-store.s3.amazonaws.com/0/254652/d60fdce7-5d93-4808-58a3-46d569050231.png)

```html:html
<p class="bg-muted">text-muted</p>
<p class="bg-primary">text-primary</p>
<p class="bg-success">text-success</p>
<p class="bg-info">text-info</p>
<p class="bg-warning">text-warning</p>
<p class="bg-danger">text-danger</p>
<p class="bg-secondary">text-secondary</p>
<p class="bg-white">text-white</p>
<p class="bg-dark">text-dark</p>
<p class="bg-light">text-light</p>
```


# コンポーネンツ

## buttons
![スクリーンショット 2018-09-15 12.51.36.png](https://qiita-image-store.s3.amazonaws.com/0/254652/21360c56-8959-7e93-ffba-738252496a65.png)


```html:html
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
```

```css:css

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-link {
    font-weight: 400;
    color: #007bff;
    background-color: transparent;
}
[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

```


## 参考サイト

リファレンス1
https://cccabinet.jpn.org/bootstrap4/utilities/display

リファレンス2
http://www7b.biglobe.ne.jp/~yumaka/bootstrap.html