【5】了解Bootstrap预置的栅格系统_html/css_WEB-ITnose

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

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

用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。

注意：由于设置了padding 和 固定宽度，.container不能嵌套。

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

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

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

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

1、它包含了易于使用的预定义classe（这个是我们要说的，不知道是不是中文官方笔误，class后面怎么多了一个e啊）；

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

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

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

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

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

全屏布局方法：

对于需要占据整个浏览器视口（viewport）的页面，需要将内容区域包裹在一个容器元素内，并且赋予padding: 0 15px;，为的是抵消掉为.row所设置的margin: 0 -15px;（如果不这样的话，你的页面会左右超出视口15px，页面底部出现横向滚动条）。

ps.说实话，上面的一大摞有几句没有看明白，但是大概的都知道了，不明白的只能通过后面的练习来了解明白了，当然这个网格使用让我想起了用Excel表格。

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

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

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

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

lg	large（大）	x≥1200px	桌面
md	middle（中）	992px≤x＜1200px	桌面
sm	small（小）	768px≤x＜992px	平板
xs	extra small（极小，网上找的，不知道有没有更合适的）	x＜768px	手机

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