bootstrap入门书籍之（三）栅格系统_javascript技巧

4、umn）可以作为数据行.row容器的直接子元素。预定义的网格类，比如.row和.col-xs-4,可用于快速创建网格布局。栅格系统中的列是通过指定1到12的值來表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4來创建。注意事项：正如上面在注释部分所展现的一样的.container（固定宽度）是固定宽度的布局方式。通过查看源码，在查看.container类的时候我们会发现，它的宽度是响应式的：（如下）.container{padding-right:15px;padding-left:15px;margin-right:auto;marginTeft:auto;}©medi

5、a（min-width:768px）{・container{width:750px;}}©media（min-width:992px）{・container{width:970px;}}/**/从上面的css代码可以看到，该类默认为整个父元素的宽度（最小屏幕），但是在大屏幕下有着不同的宽度，并且在不同宽度下左右margin会同时增加或减少（水平居中）。.container-fluid类就和.container的默认情况一样，为100%宽度。（CSS代码一样）从源码中我们还可以发现，除了有左右margin外，还可以看到该类是有着左右填充(padding)存在的。如果我们继续查看源码，可以发

6、现数据行.row'I1的每一个列也有着左右填充(padding)的存在,如下：.col-md-1,.col-lg-12/**/{position:relative;min-height:lpx;padding-right:15px;padding~lcft:15px;}看到这里，大家应该都能想到会有什么样的情况出现！我们在第一个和最后一个列因为双填充的存在，实际上对丁内容的隔离已经到了30px。我们需要怎么消除影响呢？Bootstrap是通过・rows上的外边距(margin)取负margin-left:-15px;margin-right:-15px;,表示第一列和最后一列的行偏移,用

7、来抵消第一个列的左内距和最后一列的右内距。基本用法bootstrap3.x使用了四种栅格选项來形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项Z间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm>col-md、col-lg,我们懂英文的就知道，lg是large的缩写，md是mid的缩写,sm