bootstrap的栅格系统实现原理

栅格系统的实现原理非常简单,仅仅是通过定义容器大小,平分成12份,在调整内外边距,最后结合媒体查询,就制作出强大的响应式栅格系统.

栅格系统的主要实现原理:

1.一行数据(row)必须包含在.container中,以便为其赋予合适的对其方式和内边距(padding).

2.使用行(row)在水平方向创建一组列(column).

3.具体内容应放置在列(column)内,而且只有列column内,而且只有列column可以直接作为row的直接子元素.

4.内置一大堆样式,可以使用想,row和.col-xs-4(占四列宽度)这样的样式来快速创建栅格布局.Bootstrap源码中定义的minx也可以用来创建语义化的布局.

5.通过设置padding从而创建列column之间的间隔,然后通过为第一列和最后一列设置负值的margin从而抵消掉padding的影响.

6.栅格系统中的列是通过指定1到2列的值老表示其跨越的范围的,例如,要让屏幕分为单个等宽的部分,可以使用三个.col-xs-4来创建.