Bootstrap是一款来自Twitter的前端框架。Bootstrap基于HTML、CSS、JavaScript，因为它的简单灵活使得Web开发更加快捷。它提供了一套响应式、移动设备优先的流体式网格系统，随着屏幕或视口（viewport）尺寸的增加，页面内模块自动调整自身比例实现移动端与PC端的自适应。

Bootstrap网格系统通过一系列包含内容的行和列来创建页面布局。其主要工作原理如下：

1、 container：

顾名思义，container是网格系统最外层的class，也就是最大的容器，并他只能直接包裹row这个class。container自带左右各15px的padding值，这样container与浏览器边框就有了一定的距离。

2、 row：

row是指container中的一行，每个container中可以存在多个row形成多行。

Tips:值得一提的是，row的左右各有-15px margin值，被当作为row的 div 被约束在 container内边界与粉色区域重叠，但没超过。这负的15px 的margin 值把 row的推出了container的15px的 padding，并与之重叠，本质上讲就是正负相抵消。所以，切记永远不要在container容器外用row，这样做是无效的！

3、 col-*-*：

col-*-*是网格系统中最重要的一类，如果把row看做一行，那么col-*-*就是行内的一列，col-*-*通过媒体查询的方式把容器row等分为12列，这些col-在不同屏幕大小行为不同，下表总结了 Bootstrap 网格系统如何跨多个设备工作：

Tips：就像上面所说的col也有15px的padding值，container的正padding值造成了15px的留空，row用负margin值与之相抵消，所以现在col的padding值与container的padding重叠，故此永远不要在row外使用col,在row外使用col是无效的！

4、 嵌套：

当设置了container、row、col-以后，可以在col-（列）内再创建新的栅格系统在col-内添加新的row（行）时不需再嵌container了。这个技巧在于col-扮演了container一样的角色，col-也有15px的padding值，它一样允许row的负margin值,它内部的列、内容间的补白等都一样能很好的工作了。