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。

SpaceBuilder,构建您的空间...

Bootstrap研究2布局系统杂记

Bootstrap研究2-布局系统杂记