デイトラ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は使わないベテランコーダーでも、

スタイルシートだけは切り出して使うくらいに重要みたいです。

少し難しいところではありますが、今後も使うためしっかり押さておきたいです!

コメントを残す

メールアドレスが公開されることはありません。