Bootstrapの基本的な使い方

#（１）色について
例えば、背景色をブルーにしたければ、

```
<body>
    <div class="bg-primary">Hello world!</div>
</body>
```

<img width="175" alt="スクリーンショット 2020-02-29 22.13.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/1ec7315a-932d-3c88-3a74-4bc2a73e893c.png">
となる

テキストであれば、

```
<body>
    <div class="text-primary">Hello world!</div>
</body>
```
<img width="176" alt="スクリーンショット 2020-02-29 22.14.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/2e9f653c-496c-83ff-0e62-7f51c2309c4e.png">



こんな具合となる。
詳しくは、https://getbootstrap.com/docs/4.4/utilities/colors/ を参考。

#（２）右揃え、左揃え、中央揃え、/太字
右揃え、左揃え、中央揃えはそれぞれ以下の通り

```
<body>
    <div class="text-right">Hello world"</div>
    <div class="text-left">Hello world"</div>
    <div class="text-center">Hello world"</div>
    <div class="font-weight-bold">Hello world!</div>
</body>
```

#（３）様々な色指定
わかりやすくするためにheadタグの中に、styleタグでbox-conを定義して、次にbodyタグにdivタグを２つ用意して、それぞれ、width50%、height50%の色範囲と、width75%、height100%の色範囲を指定した。

```
 <head>
  <style>
    .box-con{
      width:200px;
      height:100px;
      background:#ddd;
      margin-bottom:5px;
    }
    </style>
  </head>

<body>
  <div class="box-con">
    <div class="bg-primary w-50 h-50">Hello world</div>
  </div>

  <div class="box-con">
    <div class="bg-success w-75 h-100">Hello world</div>
  </div>
</body>
```

すると、
<img width="222" alt="スクリーンショット 2020-02-29 22.37.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/4457263c-02d0-a6b3-9409-1f15bd528e43.png">
となる。


#（４）paddingとmargin
基本形として、
p(padding) またはm(margin) location - size 
とする。

locationであるが、
t(top)、b(bottom)、l(left)、r(right)とある。

sizeであるが、
0〜5または、autoを指定する。

例えば、padding top で　size３の場合は、

```
<div class="bg-primary w-50 h-50 pt-3">Hello world</div>
```
とすると、
<img width="226" alt="スクリーンショット 2020-02-29 23.07.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/76f9d922-b39d-8618-7f34-8a06bf8ccdd3.png">

となる。


例えば、margin をy軸を0、x軸をautoとすると、

```
<div class="bg-success w-75 h-100 my-0 mx-auto">Hello world</div>
```

<img width="229" alt="スクリーンショット 2020-02-29 23.18.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/7ee67445-3477-381b-c5cf-3a90b7b59e49.png">
となる。


#（５）ボタンの作成
ボタンタグにclassを設定し、色とサイズを指定する。
色は（１）色についてを参考、サイズは、sm(small)、lg(large)を指定できる。

```
<body>
   <button class="btn btn-primary">ok</button>
   <button class="btn btn-info btn-sm">ok</button>
   <button class="btn btn-danger btn-lg">ok</button>
</body>
```

とすると、
<img width="191" alt="スクリーンショット 2020-03-01 10.17.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/bd40facd-008b-1165-7b09-df42911cacde.png">
となる。


#（６）グリッドレイアウト
classにrowを指定することで、”行”を作成する。colを設定すれば”列”を作成する。
また、colのそれぞれの幅の比率は合計が12となるように指定することで自由に変更可能。

```
<body>
        <div class="row">
          <div class="col bg-primary">1</div>
          <div class="col bg-secondary">2</div>
          <div class="col bg-info">3</div>
        </div>

        <div class="row">
          <div class="col-3 bg-danger">1</div>
          <div class="col-7 bg-warning">2</div>
          <div class="col-2 bg-dark">3</div>
        </div>
</body>
```

とすると、
<img width="1367" alt="スクリーンショット 2020-03-01 10.46.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/320d347f-fa94-43d9-24b4-5cf9bbea22ae.png">
となる。