首先了解一下，什么是网格？
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效的使用HTML和CSS的方法。
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随设备或视口大小的增加而适当地扩展到12列，即渐进增强。
Bootstrap网格系统的工作原理如下：
- 行必须放置在.container class内
- 使用行来创建列的水平组
- 内容放在列内，且唯有列可以是行的直接子元素
- 预定义网格类，如.row、.col-xs-4
- 列通过内边距来创建内容之间的间隙（.row上的外边距取负）
- 通过指定想要横跨的十二个可用的列来创建（例如创建三个相等的列，则使用三个.col-xs-4）
为了让Bootstrap开发的网站对移动设备友好，确保适当地绘制和触屏缩放，需要在网页的head中添加viewport meta标签。例如：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中，width用于控制设备宽度；
device-width确保能在不同屏幕分辨率的设备上正确显示
initial-scale确保网页加载时，以1:1比例呈现，不会有任何缩放。
此外，添加user-scalable=no ，可以禁用缩放功能，一般maximum-scale=1.0与其一起使用。
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网格系统如何跨多个设备工作：
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） | |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px （一个列的每边分别 15px） |
30px （一个列的每边分别 15px） |
30px （一个列的每边分别 15px） |
30px （一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
