Bootstrapの基礎②

#デイトラWeb制作コース初級編DAY11の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習12,13日目⏩<br><br>Web制作コース初級編DAY11💻<br><br>学習時間:1時間45分⏳<br><br>学習内容:Bootstrapの基礎を学ぶ②✏<br><br>学び📚<br>Bootstrapでできること<br>1 width/height/padding/marginの調整<br>2 Gridレイアウト<br>3 ボタン作成<br><br>詳細はQiitaで<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/yMaQYXnNIN">pic.twitter.com/yMaQYXnNIN</a></p>&mdash; ふりっく💻トリプルゼロの（これから）フリーランス (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1355057191129124867?ref_src=twsrc%5Etfw">January 29, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
#　【学習時間】

1時間45分

#　【学び】

1　width/heightの調整
・横幅を変更：```w-50```→width 50%という意味

・縦幅の変更：```h-50```→hight 50%という意味

*パーセントの変更は25,50,75,100,autoのみ！

### ↓

![スクリーンショット 2021-01-28 6.33.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/199a7093-1aca-882b-14ac-25616c47153a.png)


2 padding/marginの調整

・paddingの変更：pt(padding-top) pr(padding-right) pb(padding-bottom) pl(padding-light)＋数字

・paddingの横幅のみ変更；px 0 --;

・paddingの縦幅のみ変更：py -- 0;

*paddign,marginは段階的に1~5までの幅が決まっている

*Bootstrapの大きなルールとして、制御したい```プロパティの頭文字＋数字```で記述する

### ↓

![スクリーンショット 2021-01-28 6.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/80b6cbf8-a3cc-e348-041d-701f3ab6cbf9.png)

3 Gridレイアウト

ルール：①```class="container"```の中に作る
　　　　②改行は```class="row"```で囲うとそこまでが一行
　　　　③一つ一つのブロックは```class="col"```をつける

参考サイト: [Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする](http://websae.net/twitter-bootstrap-grid-system-21060224/)

特徴１：Gridレイアウトを使うことで、横幅を整えつつレイアウトを決めることができる！

```index.html
    <div class="container">
        <div class="row">
            <div class="col bg-primary">
                1 of 2
            </div>
            <div class="col bg-warning">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col bg-success">
                1 of 3
            </div>
            <div class="col bg-danger">
                2 of 3
            </div>
            <div class="col bg-info">
                3 of 3
            </div>
        </div>
    </div>

```

### ↓

![スクリーンショット 2021-01-28 6.53.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/107fc6fa-5602-7a24-9883-bcc74bf31501.png)


特徴２：1行を12分割して横幅を自在に変えることができる

```index.html
   <div class="container">
        <div class="row">
            <div class="col-7 bg-primary">
                1 of 2
            </div>
            <div class="col-5 bg-warning">
                2 of 2
            </div>
        </div>
        <div class="row">
            <div class="col-6 bg-success">
                1 of 3
            </div>
            <div class="col-4 bg-danger">
                2 of 3
            </div>
            <div class="col-1 bg-info">
                3 of 3
            </div>
        </div>
    </div>
```

### ↓

![スクリーンショット 2021-01-28 6.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/f6f2386e-dca9-c094-3304-138c368df92e.png)＊12に満たない部分は空白になる

特徴３：各ブラウザサイズでレイアウトを操作できる
![スクリーンショット 2021-01-28 7.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/a1814199-3c9c-55fa-3baa-08360e3da1e2.png)

4 Bootstrapでボタン作成する

①　Bootstrapはボタンのレイアウトがすでに決められている

☆共通クラス```class="btn"```を忘れずに記入する！

```index.html
<button type="button" class="btn btn-primary">Primary</button>
```

###↓

![スクリーンショット 2021-01-29 15.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/0439c3c9-4fcd-842c-62aa-664dca8b803f.png)

②　ボタンのデザインも決めることができる
```class="btn-outline-色```を記入


```index.html
<button type="button" class="btn btn-outline-success">Success</button><button type="button" class="btn btn-outline-danger">Danger</button>
```

###↓

![スクリーンショット 2021-01-29 16.02.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/534db0d2-2b74-2356-b64c-16353a9f50d2.png)

③　ボタンのサイズも決めることができる

大きくするなら```class="btn-lg```
小さくするなら```class="btn-sm```を記入



```index.html
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
```
###↓

![スクリーンショット 2021-01-29 16.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/dc43c515-5537-282e-5f23-91e8302d78af.png)