响应式作为Bootstrap的一大特色，栅格系统可谓是功不可没，既然如此，那我们就来看一下栅格系统是如何帮助bootstrap实现响应式布局的呢？
我们可以从Bootstrap的官网上找到比较官方的回答：Bootstrap提供了一套响应式、移动设备优先的流失栅格系统，随着屏幕或视口(viweport)的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。
这种说法是比较精准而且明了的，但是还可以更通俗一点的来解释：将视口等分12列，其中的元素占据不同的列数，当视口改变时，元素所占据的列数会相应改变，当然这是我暂时的理解。
我先上一段我用来做示例的代码，和相应的效果展示：
<div class="container">
<div class="row part-msg">
<div class="col-md-4 col-lg-2 col-sm-5">
<img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />
</div>
<div class="col-md-4 col-lg-2 col-sm-5">
<img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />
</div>
<div class="col-md-4 col-lg-2 col-sm-5">
<img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />
</div>
<div class="col-md-4 col-lg-2 col-sm-5">
<img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />
</div>
<div class="col-md-4 col-lg-2 col-sm-5">
<img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />
</div>
<div class="col-md-4 col-lg-2 col-sm-5">
<img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />
</div>
</div>
</div>
我电脑当前的分辨率为1600*900，这是的显示效果如下：
当我缩小浏览器大小到一定程度时，再来查看显示效果：
然后此种情况下我继续缩小浏览器视口，会发现布局会进一步的改变：
而当我进一步缩小视口的时候，图片布局也相应的发生了改变，从而显示了终结效果：
看到了这样的效果，和我最简单的描述，现在估计会有一个最大的疑惑，缩小到什么程度才会有相应的效果呢，栅格系统在这里是怎么表现的呢？
首先，在代码的最外层有一个<div class="container"></div>,作为一个div出现，我们很容易想到，它是一个独立的模块，而它具体的表现形式呢，我们来看下相应样式表中的设置：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
这里我们在container里看到了一个熟悉的代码：margin-right:auto;margin-left:auto;这不由让我想起了我们最常用的margin:0px auto；就是居中效果，而在这里同样根据屏幕大小设定的它的固定宽度，当然，我们同样要注意一点，这里是没有设置高度的，如果用来布局的话，高度的问题还需要注意协调，这个后面再说。
而我们在这个地方看到了三个用来做界限分割的视口尺寸：768px、992px、1200px。那这三个尺寸是不是与我之前的操作有相应的关系呢，答案是肯定的，就是因为它的关系。
我们来看官网在这里的解释：
我们在代码编写中也用到了相应的class属性:col-md-、col-lg-、col-sm-、col-xs-等等，而这里的md则是middle，lg代表了large，sm代表了small，xs也就代表了“更小，极小”的意思吧。这时候我们再来看上面的代码是不是非常基础，可谓是简单至极。
但是还有一个细节我们绝对是不可以忽视的，那就是<div class="row"></div>的存在，它的存在意义是什么呢？
如果出现row、column的字眼，最先想起来的是什么，对了，就是table，表格中才有行列，而这也就是我们的网格系统了，既然有了col-，那怎么能少的了row，而且列也只能在行中体现，行的下面只能是列，而相应行的相应列才是一个具体的单元格，才能写内容，而这里的row也只能被放置在container或者container-fluid之内。
至于对于行和列的设定，我们可以来看下样式表里的定义：
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
看到这里的.row的设置，发现了什么呢，还记得.container的设置么，padding:0px 15px;而这里的margin却是-15px啊。
就这样，最简单的栅格系统就完成了，突然感觉好高大上...
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/marsmile_tbo/article/details/47416405
