Info kplace.plala.jpから移設しました

---

■目的
レスポンシブデザインを目的にBootstrap 3/Gridシステムを適用します。
PC/Tablet/スマホの画面に合わせて、共に見やすいレイアウトにできます。

■Gridシステム
Bootstrapでは下表のようにxs/sm/md/lgの4種類の画面幅を想定しています。
それぞれの画面は複数のGridで横(Row)方向を構成します。
Grid幅は画面幅を12分割したColumns数単位で定義します。
画面幅が狭いスマホ/Tabletでは画面に入るGrid数をPCより少なくして見やすくします。
例えばcol-md-4のGrid幅指定ではPCでGrid幅は4/12つまり横並びでGridを3個配置できます。
同時にcol-sm-6のGrid指定ならTabletでGrid幅は6/12つまり横並びでGrid2個を配置できます。
Tabletなら3番目、PCなら4番目のGridは画面(Row)をはみ出すので下の行に順送りします。
このように横(Row)方向のGrid数を調整することでスマホでも見やすいレイアウトになります。
なお.rowは.container内に配置します。
Bootstrap 3 Grid systemのページはこちら

	スマホ <768px	タブレット <992px	PC <1200px	大画面PC ≧1200px
class n=1-12	col-xs-n	col-sm-n	col-md-n	col-lg-n
column数	12	12	12	12
Grid幅	n/12	n/12	n/12	n/12

■サンプル
6枚の写真を画面幅に応じて以下の条件で配置のサンプルです。
①幅広PC画面幅≧1200pxなら1行に3枚のフォトを配置します。
②タブレットとPC画面幅768～1200pxなら1行に2枚のフォトを配置します。
③スマホ画面幅768px以下なら1行に1枚のフォトを配置します。
■結果
Gridシステムでは画面を水平方向に分割したGrid単位で表示します。
Gridを水平方向に並べたとき画面から溢れるGridは次の行に順送りされます。
Grid幅は画面を12分割したColumns数単位で表します。
スマホならGridのcolumn数を大きくし画面に入るGridをPCより少なく設定します。
これで画面の小さなスマホでも見やすいレイアウトを実現できます。

---