Bootstrap 网格系统的工作原理

1.1 十二栅格系统

栅格就是网格，英文Grid，之所以有的地方是网格，有的地方是栅格，只是翻译习惯不同。十二栅格系统的意思是将整个屏幕按宽度划分为十二等份，而一等分代表屏幕宽度的十二分之一，为什么划分为十二等份，而不是十等分或其他等份呢，这是因为12是1，2，3，4，6的最小公倍数，根据经验，按照这样的划分是最美观和实用的。当然，我也见过36栅格和十栅格系统，从使用上来看，确实不如12栅格方便。

在十二栅格系统，如果我想把屏幕分为左右两侧，左边占三分之一，右边占三分之二，则可以将左边宽度设置为4栅格，右边设置为8栅格。如果我需要左右各站一半，只需要设置每个为6栅格。如果我只需要设置一个页面占满屏幕，可以直接设置为12栅格。你看，是不是很方便？

1.2 Bootstrap 网格系统标签

Bootstrap 网格系统设计三个标签，分别是container，row，col：

• container是容器，在上一节中，专门做了详细的介绍。

• row是行的意思，代表着一个水平行

• col是单元格，代表着具体每一个单元格，其写法有三种：col、col-栅格数（如col-3）、col-屏幕大小-栅格数（如col-md-3）。

下面是一段示例代码，将屏幕划分为三个等宽的单元，先不用深究具体代码的写法，只需要简单了解一下网格系统的结构即可，后面我们会详细说明。

<div class="container">
    <div class="row">
        <div class="col">
            第一个单元
        </div>
        <div class="col">
            第二个单元
        </div>
        <div class="col">
            第三个单元
        </div>
    </div>
</div>

1.3 Bootstrap 网格系统规则

1. 使用行（row）来创建列的水平组。

2. 一个页面内可以有多个行。

3. 行必须放置在 容器（container）内，以便获得适当的对齐（alignment）和内边距（padding）。

4. 内容应该放置在列（col）内，且唯有列可以是行的直接子元素。

5. Col列内还可以嵌套行，列内的行无需container，因为列本身就是个容器。

6. 可以直接使用预定义的网格类，比如 col-屏幕大小-栅格数，用于快速创建栅格布局。

7. 预定义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，代表占屏幕宽度。