学习Bootstrap3之栅格排版系统

image.png

bootstrap 的栅格系统是布局的一套基本工具。

相当于文本编辑来说，栅格系统是对版面的处理，尤其是水平方向的布局
版面按平面设计来说，包括页边距、天地、页脚、页眉，版块也一样。
按表现来说，排版分为层叠position(z序图层重叠)、堆叠stacking、内联inline、栅格grid, 还有浮动float、现代的弹性盒子flexbox，这些结构都维护着内容块的间距，大小，方向。
学习bootstrap的目地不仅仅在于使用bootstrap本身，而是熟悉掌握类似的css框架的组成，对于其它的框架，其构成结构与原理大致是差不多的，了解了一个，其它的就更容易上手，保证我们在不同的css框架间游刃有余。
对于移动端来说，栅格系统的重要性被降低了，因为它们大多是堆叠式排版，而且有了flexbox，可以更加灵活的进行全方位的对齐分割版面。

• container 与 container-fluid 是屏幕居中与两侧留白的工具类。

• row 是对齐父内容与约束子列浮动的工具类，它还是架构嵌套的多列结构的工具。

• col-*-* 是创建组合单元列的工具类，起到不同设备间有不同的列数或者从堆叠转换到水平排版的控制类。

如果只有单列，则无须使用 .row>.col-*-* 结构， 直接一个block元素即可。

• col-*-offset-* 让当前列向右偏移n个单位，用来对齐上一行的某列，例如表单中有无前置标签的排版。

• col-*-pull-* 与 col-*-push-* 可以使用列左右移动，因为col本身就是相对定位的，脱离了文档流的限制，用来实现SEO语义与视觉上排版的冲突解决，也可以实现堆叠与水平排版两种场景不同排序的功能。

默认边缘col会对齐父内容，col之间间隔为15px*2, 有时候需要去掉间隔，或者只想要15px间隔，这个时候就可以自定义两个类来实现：

/*
remove gutter
*/

.no-gutter .row {
    margin-left: 0;
    margin-right: 0;
}
.no-gutter [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

/*
 gutter
*/

.half-gutter {
    margin-right: 0 !important;
}
.half-gutter>[class*='col-'] {
   padding-right:0;
}

不同的设备如果需要隐藏或者显示某个元素，可以使用 visible-*-* 与 hidden-* 两套响应式工具类。
常用于小屏把导航收起为一个菜单按钮的场景。

• 在不定数内容列的场景，如果列高不一致，因为float的特性，会出现穿插卡位的bug, 这个时候就要对周期性的点进行清浮操作。

  1. 可以使用 :nth-children(4n+5){clear:left} 这样的附加css进行控制，不过它不支持IE8。
  2. 也可以添加插入额外的一个div来实现，比如 div.clearfix.visible-xs-block。

• 对于某一列想去除间隔，我们可以使用 marign-left: -15px 来消除间隔。