Bootstrap中的栅格系统

栅格实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

Bootstrap 栅格系统的工作原理：

• 行（row）必须放在.container（固定宽度）或.container-fluid（100%宽度）内，以便为其赋予合适的排列（aligment）和内补（padding）;
• 通过“行（row）”在水平方向创建一组“列（col）”;
• 你的内容应当放置在“列（col）”内，并且，只有“列（col）”可以作为行的直接子元素。
• 类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格系统布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 通过为“列（col）”设置padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行（row）”所包含的“列（col）”抵消掉了padding
• 负值的margin就是下面的示例为什么是 向外突出的原因。在栅格列中内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4。
• 如果一“行（row）”中包含了的“列（col）”大于12，多余的“列（col）”所在的元素被作为一个整体另外一行排列。

移动端需要的html页面上页头里增加如下代码标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动设备上的viewport是设备屏幕上用来显示网页的那部分区域

1.width=device-width //应用程序的宽度和屏幕的宽度是一样的

2.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）