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 まで。
inserted by FC2 system