今回はBootstrapはスマホやパソコンでのサイズが違うデバイスでも調整してくれる機能があります。レスポンシブデザインというもので、そのレスポンシブデザインを作るためにグリッドシステムというものがあります。
グリッドシステムは画面を12分割しているというものです。
このブログなのですが、12分割して３・３・３・３で分けられています。
ちなみにBootstrapの画面幅の表記はxs（エックスエス）のスマホくらい、sm（スモール）のタブレットくらい、md（ミディアム）のパソコン（小さめ）くらい、lg（ラージ）のパソコンになります。コードを書く時にはsx、sm、md、lgを使います。
それではbodyタグの中を消します。15・16行目はBootstrapを使うための物なので消しちゃダメです。
divタグでclass=”container”の中にdivタグでclass=”row”を入れることで分割してくれるようになります。1200px以上の時（lg※画面の幅の2つ前の画像）に4分割してくれます。red・blue・yellow・greenは分割を分かりやすくするために入れています。
CSSで先ほどのred・blue・yellow・greenに背景色を入れます。
1200px以上の時には上記のように4分割されています。
lgしか指定していないので、1200px以下になると1つずつになりました。
次に992px~1200pxのmdを2分割に指定します。
1200px以上（lg）で4分割になります。
992px~1200px（md）で2分割になります。
mdよりも小さくなると1つずつになりました。
mdの部分をxsに変更してみます。
lgでは4分割です。
1200px以下になった時には指定したxsが適用されて2分割されます。
幅がどんなに小さくなっても2分割のままです。
上記のように変更してみます。
lgの時には4分割です。
mdの時には上記のようになります。
md以下になると2分割になります。
次に『オススメ4』をmdの時に消してみます。
lgの時は4分割です。
mdの時に上記のような分割になり、『オススメ4』が消えました。
md以下になると2分割になりました。『オススメ4』も出てきました。
コメント