Bootstrap框架是如今最流行的前端框架之一，Bootstra功能强大，简单易学，很符合实际应用场景。但是其中包含的内容比较多，新手往往不能很快的熟练掌握。接下来，我们一起对Bootstra栅格系统做一下简单的总结：
Bootstrap栅格系统的定义是什么呢？
Bootstrap包含了一个响应式的、移动设备优先的、不固定网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类
从上述话语中可以简单的整理出三个方面：
1、 Bootstrap3是移动设置优先
2、 Bootstrap的栅格系统最多12列
3、 Bootstrap中包含了许多预定义类
在通常我们写的页面里，浏览器缩小到一定程度，页面会错位、变形，这在Bootstrap中不会，因为它是自适应的。
Bootstrap栅格系统（Grid System）相关类
\1. container类表示栅格。使用container类能够获得Bootstrap默认设置的对齐（alignment）和内边距（padding）样式。
\2. 使用.row来创建一行，每行又分为多个列。
\3. 使用.col-[screen style]-[percent]预定列元素来快创建栅格。
\4. 内容应该放置在列内，且只有列可以是行的直接子元素。
Ps:row>col
\5. 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负值得到。就是说：你想减少列间距，用负的margin来写。
\6. 网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-md-4。
Bootstrap网格的基本结构
< div class=”container”>//容器
< div class=”row”>//栅格中的行
< div class=”col--”>< /div>//行下的直接元素列
< div class=”col--”>< /div>
< /div>
< div class=”row”>…< /div>
< /div>
< div class=”container”>
栅格选项
Bootstrap栅格把设备分为了四种：
超小设备（手机）、小型设备（平板）、中型设备（笔记本电脑）、大型设备（大尺寸显示器）这四种设备它们各自的列数量和都不可以超过12.
它们的列有不同class前缀做标识。
超小设备用.col-xs
小型设备用.col-sm
中型设备用.col-md
大型设备用.col-lg-
不论哪种设备，它们的间隙都是30px（指列的padding-left;15px和padding-right:15px;）
使用栅格布局的步骤
\1. 引入bootstrap所需要的库
就好比引入一个外部样式表，只不过这个是bootstrap的样式表，它包含css和js两部分
\2. 添加bootstrap容器
在body中写一个div，并为这个div添加一个container类，这个类是非常有用的，它能在页面中创建一个居中的区域，然后我们把其它的元素放在里面。它等于是创建了一个具有静态宽度，并且margin值为auto的一个居中的div框，container的优先在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。
\3. 在container中添加row
我们用row来横向布局
\4. 在row中添加列
就好比表格中添加了tr.之后在tr中添加td一样。
Row中的列就是我们之前的.col-xs-6，加起来正好12列
栅格系统是Bootstrap中的核心，正是因为栅格系统的存在，Bootstrap才能有着如此强大的响应式布局方案。