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

■目的
スマホ対応のためのBootstrap/Gridシステムのメモです。
実際触ればより理解が容易になります。

■Gridシステム
 キーワードからGridシステムを説明します。
 Grid:Bootstrapでは複数段組(Grid)で横(Row)方向を構成します。
 Fluid:スマホのように幅が狭いと段組数を減らして溢れた段組みを下の行に順送りします。
 12 Columns:コンテナの幅を12分割した単位でGridの幅を定義するのでcol-xs-6では6/12幅のgridになります。
 .container:.rowは.container内に配置します。
 .col-md-*:medium deviceおよび、col-lg-*の指定がなければそれ以上の幅のdeviceに適用され ます。

■Media queries
 Bootstrapでは以下のmedia queriesを使用します。
 /* Extra small devices (phones, less than 768px) */
 /* No media query since this is the default in Bootstrap */
 /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) { ... }
 /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md-min) { ... }
 /* Large devices (large desktops, 1200px and up) */
  @media (min-width: @screen-lg-min) { ... }
■gridオプション
 Bootstrap Gridシステムの仕様です。
spec

■サンプル
 コンテナの幅1170pxなら1行に3枚のフォトを配置します。
 コンテナの幅750-1170pxなら1行に2枚のフォトを配置します。
 コンテナの幅750px以下なら1行に1枚のフォトを配置します。
      <div class="row">
        <div class="col-sm-6 col-lg-4"><img alt="p10" class="img-responsive" src="./photo010.jpg"></div>
        <div class="col-sm-6 col-lg-4"><img alt="p09" class="img-responsive" src="./photo009.jpg"></div>
        <div class="col-sm-6 col-lg-4"><img alt="p01" class="img-responsive" src="./photo001.jpg"></div>
        <div class="col-sm-6 col-lg-4"><img alt="p02" class="img-responsive" src="./photo002.jpg"></div>
        <div class="col-sm-6 col-lg-4"><img alt="p03" class="img-responsive" src="./photo003.jpg"></div>
        <div class="col-sm-6 col-lg-4"><img alt="p05" class="img-responsive" src="./photo005.jpg"></div>
      </div>
上記例におけるコンテナサイズと表示のサンプル画像です。
コンテナサイズに応じて行当たりの表示枚数が減少し下の行に順送りして表示されます。

■結果
 BootstrapのGridシステムによりDeviceの幅に応じた段組みの配置の自動化が可能になりました。
 何やら難しそうでしたが触ることで容易に内容を理解できます。
 サンプルではフォトの表示に適用してスマホ対応となりました。

  blog      MovableType