Bootstrap研究2-布局系統雜記

上一篇文字Bootstrap研究1-精巧的網格布局系統，里面談到了使用固定grid布局的原理和操作實踐。關於布局部分還有一些要交代，權且湊為一篇。

除了固定網格布局外，Bootstrap還提供一種流式布局Fluid grid system，其就是計算當前頁面的寬度，給每個span乘以一個百分比。使用的時候，跟固定布局類似，所不同的是兩級容器的類分別為container-fluid和row-fluid，別無其他。

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4">span 4</div>
            <div class="span8">span 8</div>
        </div>
    </div>

因為實際工業開發中，這種布局方式會使用比較少，至少筆者目前沒有接觸移動開發，所以流式布局不是筆者研究的重點。基於相同原因，響應式設計（Responsive design）部分，筆者也暫時不考慮。還有grid定制部分，里面包含了less的知識和重寫的知識，后面會有專門的文字介紹。

下面還是談一下固定grid中剩下的幾個小事項：

1.布局的偏移（offset）

如圖這種效果，兩邊有span，中間是空的

代碼也非常簡單

        <div class="row">
            <div class="span4">
                span4</div>
            <div class="span4 offset4">
                偏移4后的span4</div>
        </div>

正如你看到的那樣，第二個div內多了一個名稱為offset4的類，其實你也肯定猜到了，它是通過Bootstrap經典margin-left來實現的

.offset4 {
  margin-left: 340px;
}

其偏移的像素正好是80*4 + 20.同時Bootstrap里面還提供了從offset1到offset12在內共計12個偏移類。每兩個類之間相差80px。（只是不明白為什么會有offset12出現，因為其后加入的任何span都會突破940px這個寬度。）

2.布局的嵌套

Bootstrap中，對於進行span嵌套提供了尤其簡單的實現方式。即，在需要嵌套的span內部，新加入一個容器row，在row內繼續使用前面理論提到的span。如下：

        <div class="row">
            <div class="span12">
                嵌套的頂級
                <div class="row">
                    <div class="span6">
                        嵌套的2級</div>
                    <div class="span6">
                        嵌套的2級</div>
                </div>
            </div>
        </div>

（注意：因為是嵌套，所以是在span內加入了row，row內再繼續進行span。如此而已，別無其他。）

關於布局系統，基本上就這么多了。接下來的文字會談Base CSS。