bootstrap响应式布局,bootstrap 分析

　　Bootstrap Research 2-布局系统杂记-解释-博客花园

　　Bootstrap研究2-布局系统杂记上一篇课文Bootstrap研究1-精致网格布局系统，讲的是使用固定网格布局的原理和操作实践。关于版面还有一些需要说明的地方，就做一张吧。

　　除了固定网格布局，Bootstrap还提供了一个流布局流体网格系统，该系统计算当前页面的宽度，并将每个跨度乘以一个百分比。使用的时候和固定布局差不多，除了两级容器的类是container-fluid和row-fluid，没有别的。

　　差异

　　差异

　　分区跨度4/分区

　　分区跨度8/分区

　　/div

　　/div因为在实际的工业开发中，这种布局方式会用的比较少，至少笔者目前没有接触过移动开发，所以流式布局不是我研究的重点。同样的原因，响应式设计的部分也不在作者考虑之列。还有网格的定制部分，包含了少和重写的知识。后面会有专门的文字介绍。下面说说固定网格里剩下的几件小事：1。布局的偏移，如图，两边有跨度，中间有空码，也很简单。

　　差异

　　差异

　　span4 /div

　　差异

　　4偏移后Span4 /div

　　/div

　　如您所见，在第二个div中有一个名为offset4的附加类。其实你一定猜到了，是用Bootstrap classic margin-left实现的。

　　. offset4 {

　　左边距：340px

　　}它的偏移像素正好是80*4 20。同时，Bootstrap还提供了从offset1到offset12共12个偏移类。每个班级相差80px。(我就是不明白offset12为什么会出现，因为之后加的任何跨度都会突破940px的宽度。)

　　2.布局嵌套

　　Bootstrap为span嵌套提供了一个特别简单的实现方法。即在需要嵌套的span内部增加一个新的容器row，在row中继续使用前面理论中提到的span。如下所示：

　　差异

　　差异

　　嵌套顶层

　　差异

　　差异

　　嵌套的第二层/分区

　　差异

　　嵌套的第二层/分区

　　/div

　　/div

　　/div(注意：因为是嵌套的，所以将行添加到span中，然后该span在行中继续。仅此而已，没别的。)关于布局系统，基本上就这些了。下面的文字讲的是基础CSS。

　　空间建造者，建造你的空间.

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。