工作原理

实例2-1：index.html

说明：

（1）一共有四行，.row位于.container内。针对不同的设备，container的宽度不同。

当屏幕<768px时，.container使用最大宽度，效果和.container-full一样。

当屏幕>=768px，并且<992px时，.container的宽度为750px。

当屏幕>=992px，并且<1200px时，.container的宽度为970px。

当屏幕>=1200px时，.container的宽度为1170px。

 （2）.col-md-* 为列，表示占了*号列的宽度。

col-md-为中等屏幕列的前缀。

col-xs-为超小屏幕（手机）列的前缀

col-sm-为小屏幕（平板）列的前缀

col-lg-为大屏幕大桌面列的前缀。具体如表所示：

（3）栅格系统中各个样式类：

.container 左右各有15px的内边距。

.row 是column的容器，最多只能放12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。

column左右有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的column的内容之间则有30px的间距。