【入門】Bootstrapの書き方　〜 グリッドシステム2〜

みなさんこんにちは さくちゃん です。

前回は、基本的なグリッドシステムについて学んでいきました。
本日は前回の続き、グリッドシステムの具体的な内容について学んでいきます。
まだ前回の記事を見ていないかたは、こちらをご覧ください。

では早速やっていきましょう

グリッド

col（列）はそのまま記述すると、均等に幅を調整してくれるのですが、
12分割で割合を指定することもできます。

例えば、12を8と4に分けて書く場合は、下のように書きます。

<div class="container">
<div class="row">
　　
　　<div class="col-8 bg-primary">1</div>
　　<div class="col-4 bg-danger">2</div>

</div>
</div>

ブラウザで確認してみるとこのようになります。

このように割合を指定することができます。

イメージはこのような感じです。

この技術を使って、レスポンシブにも対応することが可能になります。

12より多い場合、少ない場合

12よりも多い数字、少ない数字を指定することもできます。

例として、10と5を指定した場合を見てみましょう。
書き方はこのように書いていきます。

<div class="container">
<div class="row">
　　
　　<div class="col-10 bg-primary">1</div>
　　<div class="col-5 bg-danger">2</div>

</div>
</div>

ではブラウザで確認してみましょう。

12よりも多い場合は、自動的に改行されるようになります。

次に少ない場合について見ていきましょう。
今回は8と2で指定していきます。
書き方はこのように書いていきます。

<div class="container">
<div class="row">
　　
　　<div class="col-8 bg-primary">1</div>
　　<div class="col-2 bg-danger">2</div>

</div>
</div>

今回はわかりやすいように、8と4で分割した行と比較してみます。
ではブラウザで確認して見ましょう。

12に満たない場合は、足りない部分が空白になっていることがわかります。

これを使って次回「レスポンシブレイアウト」について学んでいきましょう。