【5】了解Bootstrap预置的栅格系统

在开篇之前我们来说2个class，因为以后要用到的

<div class="container">  ...</div>

用.container包裹页面上的内容即可实现居中对齐，主要用于固定宽度并支持响应式布局的容器。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。

<div class="container-fluid">  ...</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

注意：由于 padding 等属性的原因，这两种容器类不能互相嵌套。

这里可能有的人不太清楚“不同的媒体查询阈值范围”是什么？这里我说下，就是定义了一套范围（这个范围有几个区间），如果你现在使用的浏览器宽度值（即可视区域）在这套范围的某个区间中，那么就使用这个区间浏览网页的的解决方案。（不知道这样说能不能让大家懂，汗 ￣□￣｜｜）

=================================================================================================

【1】下面我们就来介绍下栅格系统吧（摘抄下官网吧）

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1、它包含了易于使用的预定义类，例如上面介绍的2个类。

2、还有强大的mixin用于生成更具语义的布局（这个不是我们要说的，它相当于自定义自己要的栅格布局，默认的预置类就够我们用了，如果你想在进一步，可以自己研究下）。

=================================================================================================

【2】栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。

下面就介绍以下Bootstrap栅格系统的工作原理：

1、“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。2、使用“行（row）”在水平方向创建一组“列（column）”。3、你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。4、通过一些预定义的栅格class（.row and .col-xs-4）可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。5、通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。6、栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。7、如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

=================================================================================================

摘抄了这么多官网的，这些我们又要会到开篇时候说的“不同的媒体查询阈值范围”，也就是栅格选项，下面我们就来了解下吧！

【3】栅格选项也就是Bootstrap的栅格系统如何在多种屏幕设备上工作的。下面我们看下中文官网给出的一张表

从表中我们可以看出是有4个区间对应着自己的设备，我们假定可视区域为x。

栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何.col-md- （开头）class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- （开头）class的话）。