Bootstrap > レイアウト (ver 2.x)
更新日
2012-07-15
広告
レイアウトを調整する方法を説明します (ver 2.x)。
「ブロックレイアウト」というシンプルなレイアウトを利用できます。
<div class="container"> <div class="row"> <div class="span4">a</div> <div class="span6">b</div> </div> <div class="row"> <div class="span8">c</div> <div class="span2">d</div> </div> </div>
まず、containerクラスなdiv要素で全体を囲みます。 以降、各divには、rowクラスか、spanXクラスを指定します(Xは1から12までの数字)。rowクラスなdiv要素に含まれるdiv要素は、横に並びます。そして、横幅はXの数字に比例します。bootstrapは画面の横幅を12分割して管理します。span1クラスなdiv要素であれば、12個まで横に並べられます。上の例では、rowクラスなdiv要素の中で、2つのdiv要素を定義しており、横幅の合計はどちらも10となっています(4+6=10, 8+2=10)。なので、あと span2 だけ余白があることになります。
以下のリンクが、サンプルになります。 サンプル
広告
お問い合わせは sweng.tips@gmail.com まで。