WEBデザイン基礎（６）Bootstrap(2)

Grid System(グリッドシステム)について

とりあえず、やってみよう。

行、列に箱を作って、レイアウトしていきます。
まず、container内にrow(行)、その中にcol(列、カラム)を作る。
カラムは、12個作ることができる。
col-1 カラム1個分の大きさ
col-2 カラム2個分の大きさ
col-3 カラム3個分の大きさ
　　　・
　　　・
となる。数字を指定しなくてもcolを入れた分だけでも均等に分割される。
（とても簡単で便利）
以下のコードを、前回作成したBootstrapのスターターテンプレートのbodyにペーストし、確認してみよう。col-smは、ブラウザの幅のサイズによって、どの大きさで列を崩すか（ブレークポイント）の指定になります。
カラムが３つありますが、カラムの数を増やしたり、smを（xs、 sm、md、 lg、 xl）などに書き換えて、ブラウザの幅のサイズを変化させると表示がどう変化するか確認してみましょう。

<div class="container">
 <div class="row">
   <div class="col-sm">
     カラム１個目
   </div>
   <div class="col-sm">
     カラム２個目
   </div>
   <div class="col-sm">
     カラム３個目
   </div> 
 </div>
</div>

こんなイメージです。わかりやすくするために、ボーダーと色をつけています。

次のコードは、<div class="w-100"></div>でブレイクポイントを設定しています。

<div class="container">
 <div class="row">
   <div class="col-sm-2">
     カラム１個目
   </div>
   <div class="col-sm-4">
     カラム２個目
   </div>

　　<div class="w-100"></div>

   <div class="col-sm-6">
     カラム３個目
   </div>
 
 </div>
</div>

次のように表示されます。（コードには、ボーダーと色の設定はしていません）

次のコードは、rowの箇所にカラムの数を指定します。

<div class="container">
 <div class="row row-cols-2">
   <div class="col">Column</div>
   <div class="col">Column</div>
   <div class="col">Column</div>
   <div class="col">Column</div>
 </div>
</div>

演習　グリッドは、ネスト（入れ子）にできます。様々な組み合わせを実験してみよう。