Bootstrapを使ってみる（その３）　～グリッドシステム～

Bootstrapの続き。
今回はグリッドシステムについて試してみる。

今回のソースファイルはこちら
FlyingHighAgain/bootstrap-test · GitHub

１２分割でレイアウトする

BootstrapではHTMLの表示項目をレイアウトするのに、画面横幅を論理的に１２分割した擬似的なグリッドでレイアウトを指定する。具体的にはclassに"col-md-"などで始まり数字を付加したクラス名を付け、数字の合計が１２になるように指定する。
例えばこんな感じ。

<div class="container show-grid">
  <p>12分割</p>
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <p>2分割</p>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
  <p>3分割</p>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <p>4分割</p>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
  <p>1:2:1割</p>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>

f:id:FlyingHighAgain:20140522020325p:plain

さらに細かく分割する

ネストすることでさらに細かく分けることもできる。
先ほどの12分割したものをさらに半分(6:6)に分けてみると

<p>24分割</p>
<div class="row">
  <div class="col-md-1">.col-md-1
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>
  <div class="col-md-1">.col-md-1
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>
  <!-- 以下省略 -->

f:id:FlyingHighAgain:20140522020934p:plain

オフセットを指定する

classに"col-md-offset-"などで始まり数字を付加したクラス名をつけると前に指定列数分だけ間をあけてくれる。
例えば１列数分だけスペースを空けて配置したい場合

<p>1列とばし</p>
<div class="row">
  <div class="col-md-2">.col-md-2</div>
  <div class="col-md-2 col-md-offset-1">.col-md-2 .col-md-offset-1</div>
  <div class="col-md-2 col-md-offset-1">.col-md-2 .col-md-offset-1</div>
  <div class="col-md-2 col-md-offset-1">.col-md-2 .col-md-offset-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

f:id:FlyingHighAgain:20140522021719p:plain

ディスプレイサイズによってレイアウトを切り替える

Bootstrapでは４種類のデバイス／ディスプレイサイズが想定されている。

xs - エクストラスモールデバイス（スマートフォンなど　768px未満）
sm - スモールデバイス（タブレットなど 768px以上）
md - ミディアムデバイス（デスクトップパソコン 992px以上）
lg - ラージデバイス（デスクトップパソコン 1200px以上）

また列幅がsmでは60px,mdでは78px,lgでは95pxと決まっているようだ。*1

たとえば、"col-md-"ではミディアムデバイスの992px以上を想定したレイアウトのため、ブラウザの横幅をだいたい992pxより狭くしていくと分割されずに折り返されて表示される。

f:id:FlyingHighAgain:20140522024214p:plain

"col-sm-"だと768px以上なのでもう少し狭くしてもまだ折り返しを耐える。

f:id:FlyingHighAgain:20140522024430p:plain

"col-xs-"だと基本的には折り返されずに分割が保たれるが、列幅が小さくなってしまうため中身の文字などがはみ出たり折り返されてしまうことになる。

f:id:FlyingHighAgain:20140522024645p:plain

"col-lg-","col-md","col-sm","col-xs"は併用することができ、ディスプレイサイズによってレスポンシブルを実現することが可能だ。

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
</div>

f:id:FlyingHighAgain:20140522031654p:plain

今回はこれまで。

*1:ビューポートのscale=1の場合