📝
bootstrap ～ブレークポイントを複数設定する
先日に続きまして、bootstrapを使ったレスポンシブデザインについてまとめていきます。
今日はブレークポイントを複数設定して、段階的に画面のレイアウトが変わるようにしてみます。
ブレークポイントを複数設定する
設定の仕方は簡単です。col-画面幅-グリッド数をクラス内に併記するだけです。
画像を表示する時に下記のように段組みしたい場合
パソコンの画面サイズでは6枚表示 ⇒
col-lg-2
タブレットの画面サイズでは3枚表示 ⇒col-md-4※col-sm-4でもいいかも。
スマホの画面サイズでは1枚表示
「1列のグリッド数が12であること」を意識して、「この画面幅より大きければこのスタイルを適用する」という風に考えると組みやすくなります。
xs、smサイズ（スマホサイズ）の間はgrid数12で写真の数を1枚表示
mdのサイズ（タブレットサイズ）に達したらgrid数を4にして写真の数を3枚表示
lgのサイズ（PCサイズ）に達したらgrid数を2にして写真の数を6枚表示
記述例
では実際にコードを書いてみます。
<div class="row">
<div class="col-md-4 col-lg-2">写真１</div>
<div class="col-md-4 col-lg-2">写真２</div>
<div class="col-md-4 col-lg-2">写真３</div>
<div class="col-md-4 col-lg-2">写真４</div>
<div class="col-md-4 col-lg-2">写真５</div>
<div class="col-md-4 col-lg-2">写真６</div>
</div>
実行結果がこちら。検証ページで画面サイズを変えた時の見え方が確認できます。
自分で色々設定して動かしてみるとだんだんわかってきます。
画面サイズ次第で段組みを変えるとか、やれることがぐんと増えそう。
bootstrap慣れていきたいです！
参考
Discussion