Bootstrap4的栅格布局
Bootstrap架构内置了一套响应式网格的布局系统，网格布局实际上就是把网页分成一定数量的栏数或者叫做网格，Bootstrap4的网格系统就是把网页分成12栏，如果你想让网页中的某一元素占用一定数量的栏数的宽度，你可以在该元素上添加一个类似于.col-
*特定的类。
1 栅格容器
容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。Bootstrap4提供了如下容器：
.container：任意视窗下，添加补丁，固定尺寸容器
.container-fulid：任意视窗下，100%宽度容器
.container-[sm | md | lg | xl] ：100%显示到指定视窗时，固定尺寸容器
步骤1：声明栅格布局容器
步骤2：在容器中声明行
步骤3：在行中声明列
3 关于列
3.1 设置列宽
3.1.1 平均分配栅格
.col :在所有视窗下平均分配栅格数
.col-[sm | md | lg | xl]：指定视窗及以上，平均分配栅格。
请编辑以下代码，在不同视窗下显示页面效果，然后修改.col类名为.col-sm，.col-md，.col-lg，.col-xl类名，理解Bootstrap架构的视窗断点。
第1列
第2列
第3列
在Bootsrap4中，当我们平均分配栅格数的时候，可以在行标签添加如下类，可以指定该行所显示的列数。
.row-cols-*：任意视窗，该行所显示的列数。*代表的是1 – 6这六个数字。
.row-cols-[ sm | md | lg | xl ]-*：指定视窗及以上，该行所显示的列数
请编辑以下代码，在不同视窗下显示页面效果，然后修改`.row-cols-*`类名为`.row-cols-sm-*`，`.row-cols-md-*`，`.row-cols-lg-*`，`.row-cols-xl-*`类名，在不同视窗下显示页面的效果。
第1列
第2列
第3列
第4列
3.2.2 指定列宽
.col-[n] 在任何尺寸下，占用指定的列数
.col-[sm | md | lg | xs]-[n] 在指定的视窗及以上，占用指定的列数
请编辑以下代码，在不同视窗下显示页面效果，然后修改.col-*类名为.col-sm-*，.col-md-*，.col-lg-*，.col-xl-*类名，再在不同视窗下显示页面效果。
第1列
第2列
3.2.3 可变的列宽
根据内容的自然宽度调整列的大小。
.col-auto 在任何尺寸下，都根据内容来调整列的大小
.col-[ sm | md | lg | xl ]-auto 在指定尺寸及以上，根据内容来调整列的大小
请编辑以下代码，在不同视窗下显示页面效果，然后修改.col-auto类名为.col-sm-*auto，.col-md-auto，.col-lg-auto，.col-xl-auto类名，再在不同视窗下显示页面效果。
1
bootstrap v4.0版本
3
3.3 列拆分
3.3.1 自动拆分
在Bootstrap中，如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。编辑如下代码，体会自动拆分。
1
2
3
3.3.2 手动拆分
在Bootstrap4中，提供了.w-100类，在需要拆分的位置，添加类名为.w-100，则可以自动换行，拆分列。编辑一下代码，体会.w-100的作用。
1
2
3
4
3.3.3 响应式拆分
为类名为.w-100拆分列的div添加.d-none和.d-[sm | md | lg | xl ]-block，我们可以进行指定视窗及以上的进行响应式拆分
1
2
3
4
3.4 列排序
为所在列添加.order 类可以为该列排序，在Bootstrap4中有以下相关的类名。
.order-[n]：n为0 - 12，数字越小越优先。在任何视窗下，都遵循这个顺序
.order-[sm | md | lg |xl ]-[n]: 在指定视窗及以上，遵循这个顺序
.order-first 在任何视窗下，都放在第一列
.order-[ sm | md | lg | xl ]-first：在指定视窗及以上，放在第一列
.order-last :在任何视窗下，都放在最后一列
.order-[ sm | md | lg | xl ]-last：在指定视窗及以上，放在最后一列
编写以下代码，体会为其中一列添加.order类时，列是如何排序的。
1
2
3
4
编写以下代码，体会order-[n]中，数字越小越优先的原则，并修改指定视窗下排序。
1
2
3
4
编写以下代码，体会.order-first和.order-[n]的权重，并修改指定视窗下的排序。
1
2
3
4
编写以下代码，体会.order-last和.order-[n]的权重，并修改指定视窗下的排序。
1
2
3
4
3.5 列偏移
在Bootstrap4中，可以使用以下类将列向右侧偏移：
.offset-*：任意视窗下，向右偏移*号列
.offset-[sm | md | lg | xl ]- * ：在指定视窗及以上，向右偏移*号列
编写以下代码，在不同视窗下显示页面效果，并体会偏移原则：
1
2
3
4
3.6 列对齐
3.6.1 水平对齐
在Bootstrap4中，为.row类所在的行标签设置以下类，可以设置该行所在的列进行对齐方式的设置
.justify-content-start,.justify-content-[sm | md | lg | xl ]-start：左对齐
.justify-content-end,.justify-content-[sm | md | lg |xl ]-end：右对齐
.justify-content-center,.justify-content-[sm | md | lg |xl ]-center：居中对齐
.justify-content-around,.justify-content-[sm | md | lg |xl ]-around：分散对齐
.justify-content-between,.justify-content-[sm | md | lg |xl ]-between：两端对齐
编辑如下代码，并在不同的视窗下显示页面的效果，并修改对齐方式，完成所有对齐方式的设置。
1
2
3
3.6.2 垂直对齐
在Bootstrap4中，为.row类所在的标签设置如下类，可以设置列所在行垂直方向的对齐方式。
.align-items-start,.align-items-[sm | md | lg |xl ]-start：垂直方向靠上对齐
.align-items-end,.align-items-[sm | md | lg |xl ]-end：垂直方向靠下对齐
.align-items-center,.align-items-[sm | md | lg |xl ]-center：垂直方向居中对齐
编辑如下代码，并在不同的视窗下显示页面的效果，并修改对齐方式，完成所有对齐方式的设置。
1
2
3
3.6.3 单个元素对齐
在Bootstrap4中，为列标签设置如下类，可以设置该列在所在行垂直方向的对齐方式。
.align-self-start，.align-self-[sm | md | lg |xl ]-start:垂直方向靠上对齐
.align-self-end，.align-self-[sm | md | lg |xl ]-end：垂直方向靠下对齐
.align-self-center，.align-self-[sm | md | lg |xl ]-center：垂直方向居中对齐
编辑如下代码，并在不同的视窗下显示页面的效果，并修改对齐方式，完成所有对齐方式的设置。
1
2
3
作者：2019camila
