栅格系统是Bootstrap中的核心，正是因为栅格系统的存在，Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说：
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
我们来理解一下这一段话，可以发现其中最重要的部分就是 移动设备优先 ，那么什么是移动设备优先呢？
Bootstrap的基础CSS代码 默认从小屏幕设备 （比如移动设备、平板电脑）开始，然后使用 媒体查询扩展到大屏幕设备 （比如笔记本电脑、台式电脑）上的组件和网格。
有着如下策略：
内容：决定什么是最重要的。
布局：优先设计更小的宽度。
渐进增强：随着屏幕大小增加而添加元素。
工作原理
数据行（ .row ）必须包含在容器 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内填充（padding）。如：
<div><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 --> <div></div> </div> <!-- 或者 --> <div><!-- 默认一直充满整个父元素 --> <div></div> </div>
在数据行（ .row )中可以添加列（column），但列数之和不能超过平分的总列数（在超过时，多余部分会换行显示），默认12。（使用Less或者Sass可以进行自定义设置）如：
<div> <div> <div></div> <div></div> <div></div>
页面上的 具体内容 应当放置于列（column）内，并且 只有列 （column）可以作为数据行 .row 容器的 直接子元素 。
预定义的网格类，比如 .row 和 .col-xs-4 ，可用于快速创建网格布局。
栅格系统中的列是通过指定 1到12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
注意事项：
正如上面在注释部分所展现的一样的 .container （固定宽度）是固定宽度的布局方式。通过查看源码，在查看 .container 类的时候我们会发现，它的宽度是响应式的：（如下）
.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; } } /*........*/
从上面的css代码可以看到，该类默认为整个父元素的宽度（最小屏幕），但是在大屏幕下有着不同的宽度，并且在不同宽度下左右margin会同时增加或减少（水平居中）。
.container-fluid 类就和 .container 的默认情况一样，为100%宽度。 （CSS代码一样）
除此之外
从源码中我们还可以发现，除了有左右margin外，还可以看到该类是有着左右填充（padding）存在的。
如果我们继续查看源码，可以发现数据行 .row 中的每一个列也有着左右填充（padding）的存在，如下：
.col-md-1, .col-lg-12 /*......*/{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
看到这里，大家应该都能想到会有什么样的情况出现！我们在第一个和最后一个列因为 双填充 的存在， 实际上对于内容的隔离 已经到了 30px 。我们需要怎么消除影响呢？
Bootstrap是通过 .rows 上的外边距（margin）取负 margin-left: -15px;margin-right: -15px; ，表示第一列和最后一列的行偏移，用来抵消第一个列的左内距和最后一列的右内距。
基本用法
bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
通过源码可以发现，如下：
.col-md-1/*......*/{ float: left;}/*所有的列都是默认向左浮动的*/ .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } /*.....*/ .col-md-12 { width: 100%; }
从这些CSS代码也就不难发现，Bootstrap中每一列所占的宽度，以及为何在列数设置超过12时，超过部分会换行显示了。
在下面所有的示例中每一列的背景颜色与边框的效果由如下CSS代码控制：
[class *= col-]{ background-color: #eee; border: 1px solid #ccc; }
基础
那么我们就来看看一些示例吧，下面这种方式是最基本的用法：