如果你以前使用过Bootstrap2或者了解过响应式技术，那么肯定对Bootstrap栅格系统并不陌生，由于栅格系统的引入，使得Bootstrap的跨设备布局显示变得可能。
什么是栅格系统
栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。
例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。
不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。
Bootstrap的栅格系统
在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。
我们先看看Bootstrap有几种栅格类可以使用：
1. .col-xs-* 这是超小屏幕类（<768px），类似手机等设备。
2. .col-sm-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。
3. .col-md-* 这是中型设备类（≥992px且<1200px）。
4. .col-lg-* 这是大型设备类（≥1200px）。
如何使用Bootstrap栅格系统
你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。
例如：<div class="col-xs-6 col-md-12"></div><div class="col-xs-6 col-md-12"></div>这种编码的结果就是，这两个div在pc端浏览起来是两行（每行都占据12列栅格），而在手机端浏览器来是一行两列（每列占据6列栅格）。
通过这种形式，就能很方便地使用栅格系统定制自己的应用布局了。
***********************************************************************************************************************************************
实现一个简单的栅格系统
实现一个简单的栅格系统
关于栅格系统
相信大家都用过 Bootstrap ，栅格系统就是 Bootstrap 的核心，现在许多 UI 库中也增加了对栅格系统的支持。
栅格系统是通过对元素增加各种不同的类名从而在不同的屏幕宽度下实现不同的效果，从而实现响应式的功能。
实现栅格系统，首要要确定两个内容。
我们打算将屏幕分为几类，每一类的类前缀是什么。
我们打算支持的列数是多少。
这里我选择与 bootstrap 相同， 即将屏幕分为四类：超小屏幕 手机 (<768px) 、小屏幕 平板 (≥768px) 、 中等屏幕 桌面显示器 (≥992px) 、 大屏幕 大屏幕显示器 (≥1200px) ，类前缀分别为：.col-xs- 、 .col-sm- 、 .col-md- 、 .col-lg- 。列数 12。
实现
确定了我们的屏幕分类和列数之后，我们就可以开始实现了。首先我们给所有栅格系统的 class 增加浮动
.col-sm-1, .col-sm-2, ... , .col-lg-12 {
float: left;
}
声明了浮动，接下来我们来声明宽度。我们从最小屏幕开始，最小屏幕不需要使用 @media来声明， 即如果我们只声明了最小宽度时他的类名，其元素将在所有情况下生效。
.col-sm-1 {
width: 8.333333% // 十二分之一
}
.col-sm-2 {
width: 16.66667% // 十二分之二
}
// ...
.col-sm-12 {
width: 100% // 十二分之十二
}
这样最小宽度的情况我们就写好了。接下来我们来写其他情况
其他情况也需要声明浮动和宽度，但是需要声明最小屏幕宽度，我们以中等屏幕宽度举例，中等屏幕宽度即为屏幕大于992px的情况：
@media (min-width:992) {
.col-md-1 {
width: 8.333333% // 十二分之一
}
.col-md-2 {
width: 16.66667% // 十二分之二
}
// ...
.col-md-12 {
width: 100% // 十二分之十二
}
}
其他情况同理，这样我们就能实现一个简单的栅格系统很啦。
疑问
很多小伙伴肯定会想，我们只声明了最小宽度，却没有声明最大宽度，这里是不是有问题呀。
其实不是的。这里的想法是这样的，比如我们这里写了中等屏幕宽度和超小屏幕宽度两种情况的 class ，那在超小屏幕上和小屏幕上都会按超小屏幕声明的宽度来执行。而在中等屏幕宽度和大屏幕上，中等屏幕宽度的声明会覆盖超小屏幕的声明，则会按中等屏幕声明来执行。
最后
虽然现在的 UI 库大都会封装这些功能，但是自己实现一个了解一下原理对我们也是大有碑益的。