50(+10) 列栅格系统

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
17
33
10
40
10
15
25
25
25
50

默认的50列、990px宽度的栅格系统。 

<div class="row">
      <div class="span10">...</div>
      <div class="span15">...</div>
      <div class="span25">...</div>
    </div>

页面被我们分割成50个基础列，你通过指定横跨多少列来控制每个区域的宽度。


带有偏移量的列

10
25 offset 15
33 offset 17
<div class="row">
      <div class="span10">...</div>
      <div class="span25 offset15">...</div>
    </div>

嵌套列

有时我们需要在某一列中嵌套一个栅格，只需要在 .span* 中增加一个 .row ， 并在 .row 中增加若干 .span* 。

样例

嵌套行中的列横跨宽度相加必须等于其外部列的宽度。 例如：一个 .span25 列中可以有一个 .span10 列和一个 .span15 列。

Level 1 of column
Level 2
Level 2
<div class="row">
      <div class="span25">
        Level 1 of column
        <div class="row">
          <div class="span10">Level 2</div>
          <div class="span15">Level 2</div>
        </div>
      </div>
    </div>