デイトラweb制作初級編 DAY11

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は使わないベテランコーダーでも、
スタイルシートだけは切り出して使うくらいに重要みたいです。
少し難しいところではありますが、今後も使うためしっかり押さておきたいです!