Bootstrap网格

首先了解一下，什么是网格？

　　在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效的使用HTML和CSS的方法。

Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随设备或视口大小的增加而适当地扩展到12列，即渐进增强。

Bootstrap网格系统的工作原理如下：

1. 行必须放置在.container class内
2. 使用行来创建列的水平组
3. 内容放在列内，且唯有列可以是行的直接子元素
4. 预定义网格类，如.row、.col-xs-4
5. 列通过内边距来创建内容之间的间隙（.row上的外边距取负）
6. 通过指定想要横跨的十二个可用的列来创建（例如创建三个相等的列，则使用三个.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