BootstrapでGridを使う
fulid layout
container-fluid class
常にスクリーンのサイズに合わせてレイアウトを変える
<div class="container-fluid" >
flexible layout
container class
スクリーンサイズがあるサイズになるとレイアウトが変化する。
750px, 970px, 1200pxなど
<div class="container">
フレキシブルグリットシステム
flexible layout
.container class コンテイナークラス
スクリーンのサイズによってあるサイズになるとページのレイアウト合わせるようにする。
小さな機種（携帯）
コンテイナーのサイズは、スクリーンサイズと一緒
phone screen <768px
.col-xs-
タブレット機種
コンテイナーの最大サイズは、750PX
tablet screen 768px<, >992px
.col-sm-,
小さなデスクトップ（ノート）
コンテイナーの最大サイズは、970PX
small desktop screen 992px>, <1200PX
.col-md-,
大きなデスクトップ
コンテイナーの最大サイズは、1170PX
small desktop screen >1200PX
.col-lg-,
bootstrap では、gutter width 30pxである。
columnのサイズは、
automatic 小さな機種（携帯）
62px タブレット機種
81px 小さなデスクトップ（ノート）
97px 大きなデスクトップ
viewport meta tagは、携帯が、デスクトップサイズで表示しようとしないようにして、常に反応してページを表示するためのもの。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
row class の中に、col classを記述
スクリーンサイズの並記
サイズによって調節してdivn内容を並ばせるために、sm, md, lgを並記する。
<div class="col-sm-6 col-md-4 col-lg-3">
offset col-sz-offset-n
offset を使って、右にコラムを寄せる。
col-offset-n
nだけコラムのマージンを左に移す
<div class="col-md-4 col-md-offset-8">
pull and push col-sz-push-n, col-sz-pull-n,
コラムの位置をプッシュ、プルを使って、書き直すことができる。
<div class="col-md-9 col-md-push-3"> 右のコラムへ
<div class="col-md-3 col-md-pull-9"> 左のコラムへ
visible-sz, hidden-sz
svisible-sz、 zのサイズにスクリーンがなったら、見える
hidden-sz、zのサイズにスクリーンがなったら、消える
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 visible-xs">
Extra Small
</div>
</div>
</div>
inline, block
inline 常に横に並ぶようにする 同じrowにある。
block ブロックの中は、paddingで指定されたデザインになる
visible-sz-inline, visible-sz-block
<div class="col-sm-3 visible-xs-inline visible-sm-block card">
Card #1
</div>
<div class="col-sm-3 visible-xs-inline-block visible-sm-block card">
Card #2
</div>
その他に
visible-print-block
visible-print- inline,
visible-print-inline-block,
hidden-print
clearfix
レイアウトの改行を確実にする。
<div class="clearfix"></div>
