Bootstrapのグリッドシステム
グリッドシステムとは、サイトの割る付けの構成を横12ブロック単位で分割できるように考えられたもので、クラスを col-xs-3 のように指定すると分割できます。
例えば、
<div class="container">
<div class="row">
<div class="col-xs-3"></div>;
<div class="col-xs-9 col-xs-offset-3"><div>
</div>
</div>
と、書くと、
| 1 | 2 | 3 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
col-xs-3で左から3ブロック分と、次のDIVで9ブロック分とるけど、offsetで、スタート位置を左から3ブロックずらしてから9ブロック使いますとなります。
containerで割り付ける領域を指定。rowで行を指定(横に並んだり、ブレークして縦に引っ付いたりする単位)。
containerは固定幅指定で、container-fruidは流動的に変化する。
xsの部分は、作っているWEBサイトがどのような画面サイズの端末からアクセスされることを期待するのかによって以下のように選択します。
| モバイル（768p未満） | タブレット（768px以上、992px未満） | デスクトップ（992px以上、1200px未満） | デスクトップ大画面（1200px以上） | |
|---|---|---|---|---|
| class名接頭辞 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 横幅ブレークポイント | なし（auto） | 750px | 970px | 1170px |
ここに、色々なパターンが紹介されているので、サイト構成をアレンジしてみてね。
http://bootstrap3-guide.com/base/grid.html
http://getbootstrap.com/examples/grid/