【Bootstrap:2】Bootstrapでレスポンシブ設計をしよう。

コンテンツエリアをレスポンシブにする。

2カラムのコンテンツエリアをレスポンシブにするには
2つのカラムを囲む親タグのクラス名をclass="row"と宣言。
その中に入る子タグのクラス名をclass="col-xs-数値"と設定しておくと768px以下の解像度で可変レイアウトをとるようになる。

<div class="row">
  <div class="col-xs-3">xs_3</div>
  <div class="col-xs-9">xs_9</div>
</div><!-- / .row -->

768pxまではこのレイアウトだが

768pxを着るとレイアウトが可変する。

グリッドシステムによるレスポンシブ

12カラムでもクラス名につけるサイズによってレイアウトが可変する。

主なデバイス	スマートフォン	タブレット	ノートPC,デスクトップ	大画面
プラウザの幅	768px以下	768~991px	992~1199px	1200px以上
全てのサイズに適用	col-xs-*
768px以上に差適用		col-sm-*
992px以上に差適用			col-md-*
1200px以上に差適用				col-lg-*

768px以下

768px以上

992px以上

1200px以上

オフセット(空白）カラムの指定。

クラス名に"col-サイズ名-offset-カラム数"でオフセットカラムを挿入できる。

<div class="row red">
  <div class="tall col-xs-3">xs_3</div>
  <div class="tall col-xs-3 col-xs-offset-6">offset-6,xs_3</div>
</div><!-- / .row -->

出力表示

左右に3カラムと中央にオフセット6カラム。