スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

Bootstrapのブレイクポイントとその設定方法

Bootstrapのブレイクポイントとは

Bootstrapのグリッドシステムにおけるブレイクポイントとは、画面サイズに応じてレイアウトが切り替わるポイントのことを言います。
Bootstrap2まではスマートフォンとパソコンに対応する2種類のポイントだけでしたが、Bootstrap3からはスマートフォン、タブレット、一般的なディスプレイのパソコン、大画面ディスプレイのパソコンと4種類のポイントに増えて、レスポンシブコーディングの際の利便性がさらに増しました。

設定方法
以下のようなコードを例として説明します。

<div class=”row”>
<div class=”col-md-4 col-sm-6″”>
    ………………………
</div”>
<div class=” col-md-4 col-sm-6″”>
    ………………………
</div”>
<div class=” col-md-4 col-sm-12″”>
    ………………………
</div”>
</div”>

Bootstrapのブレイクポイントは、<div class=”col-md- xx “>の「md」の部分を変えることで変更出来ます。「xs」はスマートフォンで表示幅が768px未満、「sm」はタブレットで表示幅が768px以上、「md」はデスクトップで表示幅が992px以上、「lg」はデスクトップ(大)で表示幅が1200px以上です。4種類全ての設定が必要なわけではありません。

上記の例では、「md」、即ち992px以上の表示幅(一般的なディスプレイ以上の画面)の場合、4:4:4=1:1:1で表示されます。Bootstrapのグリッドシステムでは、1行分が12列に分割されていて、12列を超えた場合は2行目に表示されることになりますので、「sm」、即ち768px以上992px未満(タブレットの画面)では2つのブロックを1行目に6:6=1:1の割合で表示させ、2行目には1つのブロックが表示されることになります。画面幅が設定より狭くなるとグリッドレイアウトが解除され、そのブロックが縦並びに表示されるので、768未満(スマートフォンの画面)では、全てのブロックが縦並びに表示されることになります。