bootstrap ～レイアウトをレスポンシブにする

先日に引き続き、bootstrapについてまとめていきます。
今日はグリッドシステムを利用したレイアウトをレスポンシブ化していきます。

ブレークポイント

bootstrapには、PCやタブレット、スマホなど様々なデバイスの画面サイズに応じた表示ができるよう、ブレークポイントがあらかじめ設定されています。

Extra small	Small	Medium	Large	Extra Large
0px ～	576px ～	768px ～	992px ～	1200px ～

横幅が575pxまでは「Extra small」、横幅が576px～767pxは「Small」というように、設定された幅に対して名前が付けられています。

• Large、Extra Large ⇒ パソコン
• Medium ⇒ タブレット
• Extra small ⇒ スマートフォン

ざっくりとですが、各デバイスの画面サイズに当てはめるとこんな感じでしょうか。

ブレークポイントを利用してレスポンシブ化する

それでは、ブレークポイントをcolに設定して、レイアウトをレスポンシブ化してみます。
書き方は、col-画面幅-グリッド数です。画面幅の部分は下記の略字で表します。

Extra small	Small	Medium	Large	Extra Large
なし	sm	md	lg	xl

試しに「col-lg-4」と設定して挙動を確認してみます。

<div class="row">
  <div class="col-lg-4">col-lg-4</div>
  <div class="col-lg-4">col-lg-4</div>
  <div class="col-lg-4">col-lg-4</div>
</div>

画面幅が「992px（＝Large）」以上の時、グリッド数4のcolが3つ横並びになります。

画面幅が「991px」以下になると、グリッド数4の設定が消えて縦並びになります。

ブレークポイントを複数設定してさらに見やすく

ブレークポイントは一つだけでなく、複数設定することができます。スマホ、タブレット、PCでレイアウトを変えたい時に便利ですね。こちらについてはまた後日まとめてみたいと思います。