[Bootstrap]初めてのBootStrap2:grid

昨日のエントリーでは、レイアウトについて書きました。

今日は、gridについて。

grid systemを読むと、基本的に、bootstrapでは、divタグにspanNというクラスを付与してコーディングを行うようです。

試しに、下のように組んでみました。

<div class="container"> <div class="row"> <div class="span4" style="background-color:gray;"> This is the left menu. </div> <div class="span8" style="background-color:orange;"> This is the right menu. </div> </div> </div>

実行結果は、下のようになります。

2段組なので、span4とspan8を指定しました。

ポイントとしては、各指数の合計が12になるということ。
(この場合、4+8=12)

さらに、今回、ちょっと冒険して、さらに下のようにコーディングしました。

<div class="container"> <div class="row"> <div class="span4" style="background-color:gray;"> This is the left menu. </div> <div class="span8" style="background-color:orange;"> This is the right menu. </div> </div> this is the main menu. </div>

class名のrowの後に、「this is the main menu」というテキストを入れました。

実行結果は、下のようになりました。

これは、すごい。

なにがすごいかって、自動的にfloatが解除されること。

コーディングをしていると毎回、毎回、決まり文句のようにでてくる
「float:left」
「clear:both」
などを書かなくていいので、便利ですねー。