Bootstrap2のグリッド機能で段組を作成(2ページ目)

グリッドシステムはネスト（入れ子）構造にもできる

「Twitter Bootstrap」で作れる段組構造は1階層だけではありません。例えば右図のように、ページの横幅全体を「25％：75％」に2分割した上で、右側の段の中をさらに3等分する……という、2階層の段組構造も簡単に作れます。

(追記) ここでご紹介している記述方法は、「Bootstrap 2」での書き方です。「Bootstrap 3」では使用するclass名が異なります。

この2階層の段組構造を作るには、以下のように記述します。まずは前ページでご紹介したように、25％（＝3/12）と75％（＝9/12）の2つに分割します。

<div class="row-fluid">
   <div class="span3">...</div>
   <div class="span9">...</div>
</div>

続いて、右側の段を作るdiv要素の中に、以下のようにHTMLを書き加えます。

<div class="row-fluid">
   <div class="span3">...</div>
   <div class="span9">
      <div class="row-fluid">
         <div class="span4">...</div>
         <div class="span4">...</div>
         <div class="span4">...</div>
      </div>
   </div>
</div>

上記のように記述すると、2階層の段組構造が作れます。この段組構造のイメージは下図の通りです。


グリッドシステムは、常に「その場の横幅を12分割」する仕様になっています。上図の下側で示したように、段組の内側にさらに段組を作る場合でも、「その領域の横幅を12分割」した数字を使って、合計12になるよう指定します。

例えば、「1階層目でグリッド10個分を使った段」の中をさらに分割する場合でも、2階層目では「合計10になるよう指定」するのではなく、「合計12になるよう指定」します。何階層目の場合でも同様です。

さて、「Twitter Bootstrap」には、閲覧者が使用しているブラウザの幅に合わせてレイアウトを変化させる機能もあります。この機能を活用すると、表示領域の幅が狭い環境で閲覧された場合でも、見やすさを維持できます。

最後に、表示領域の幅に合わせてレイアウトを変化させる方法と、実際に段組構造を作ってみたサンプルページをご紹介致します。