【Twitter Bootstrap001】グリッドレイアウト：Webマスターへの道～覇王への道程～：So-netブログ

	ブログをはじめるログイン

【jQuery005】Google Ma..｜Googl Chrome 19リリースブログトップ

【Twitter Bootstrap001】グリッドレイアウト　[Twitter Bootstrap] [編集]

バージョン2.0がオープンになったTwitter Bootstrapについて見ていきたいと思います。

第1回はグリッドレイアウトについてです。

Twitter Bootstrapでは横幅940pxを基準として、12列に分割しています。

12列を複数に分割してレイアウトを組んでいくことになります。

具体的に例を見てみましょう。

<body>

<div>

<div class="span4" style="background-color:red; height:100px;">span4を適用したdivブロック</div>
<div class="span8" style="background-color:blue; height:100px;">span8を適用したdivブロック</div>

</div>

<div>

<div class="span2" style="background-color:red; height:100px;">span2を適用したdivブロック</div>
<div class="span2" style="background-color:red; height:100px;">span2を適用したdivブロック</div>
<div class="span2" style="background-color:red; height:100px;">span2を適用したdivブロック</div>
<div class="span6" style="background-color:blue; height:100px;">span6を適用したdivブロック</div>

</div>

<div>

<div class="span11" style="background-color:red; height:100px;">span1を適用したdivブロック</div>
<div class="span1" style="background-color:blue; height:100px;">span11を適用したdivブロック</div>
</div>

</body>

上のコードを見て下さい。各div要素のクラスにspan~というのが設定されていると思います。

これがキモです。

外側のdiv要素内にあるspanの数を足すと、12になります。

というより、12になるように設定していきます。

そうすると、あとは自動的にレイアウトを組んでくれます。

上記の例ですと、下記のようなページが生成されます。

以上、第1回はグリッドレイアウトについてでした。

次回以降は、ボタンやメニューなどの個別の要素を見ていきます。