デイトラweb制作初級編 DAY11
nakano
width・heightの調整（Bootstrap）
Bootstrapサイト内「Sizing」で検索
w・・・width（横幅）
h・・・hight（縦幅）
※親要素に対して0%、25%、50%、100%、auto
使用例（親要素に対して width 25%） ↓
<div>
<div class="w-25">Hello world</div>
</div>padding・marginの調整（Bootstrap）
Bootstrapサイト内「Spacing」で検索
p・・・padding（内側）
m・・・margin（外側）
pt・・・padding top
pr・・・padding right
pb・・・padding bottom
pl・・・padding left
py・・・padding 上 0 下 0（Y軸のみ）
px・・・padding 0 右 0 左（X軸のみ）
※1~5段階で調整
使用例（padding top 5 / margin bottom 3）↓
<div class="pt-5 mb-3">Hello world</div>Gridレイアウト（Bootstrap）
グリッドとは
サイトの横幅を均等に分けるガイドラインのこと。
Bootstrapでは12本のグリッドが存在する。
Bootstrapサイト内「Grid system」で検索
使用例 ↓
<div class="container">
<div class="row">
<div class="col">
1行目
</div>
</div>
<div class="row">
<div class="col">
2行目
</div>
</div>
</div>・container > row > col の大きさで包んでいるイメージ
・必ず「container」classで囲む
・段落を変えたいときは「row」を使って分ける
・レスポンシブ対応もできる
イラストありのGridのイメージ
→ 参考ページ https://websae.net/twitter-bootstrap-grid-system-21060224/
ボタンの装飾（Bootstrap）
Bootstrapサイト内「Buttons」で検索
btn-primary・・・青色のボタン
btn-outline-primary・・・外枠が青色のボタン
使用例①（ボタンの色は primary）↓
<button type="button" class="btn btn-primary">ボタン</button>
使用例②（ボタンの色は primary + outline）↓
<button type="button" class="btn btn-outline-primary">ボタン</button>
まとめ
今回は様々なBootstrapの使い方を学びました。
学んだ中でもGridによるレイアウトは、Bootstrapは使わないベテランコーダーでも、
スタイルシートだけは切り出して使うくらいに重要みたいです。
少し難しいところではありますが、今後も使うためしっかり押さておきたいです！
