一. 理解栅格
1.栅格的概念
栅格就类似于将一个WEB网页，分成很多很多块儿，每一块儿里相互包含或并列，这样对于跨页面浏览，js/css只需要调整这些栅格的属性，就很方便调整web的样式。
2.Container容器
Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。
我们的Container容器是一个最基本的容器。我们的内容，因该部署在这里面。预览一下常见的两种容器：container和container-fluid前者是根据网页来调整占比，后者是占满整个屏幕：
<div class="container" style="background-color: red;height: 150px"></div>
<div class="container-fluid" style="background-color: yellow;height: 150px"></div>
尝试拖动网页，你就会有新奇的发现，他们是根据当前页面大小来调整的，这些容器也有他们的大小等级：
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
就如同我们买衣服一样，180~190的人我们至少得买180以上的衣服，而到了190的人，我们就因该买下一个档位的衣服。
二.栅格
1.简述栅格
一个容器里最多包含12个栅格（12列），你可以通过“合并”其实就是调整栅格所占列 或者设置偏移、对齐后面会提到 来创建1~12个美观的栅格。
2.栅格属性
a)自动排布
①等宽布局
<div class="container" style="background-color: red;height: 150px">
<div class="row">
<div class="col" style="background-color: yellow">第一部分</div>
<div class="col" style="background-color: blueviolet">第二部分</div>
<div class="col" style="background-color: green">第三部分</div>
</div>
</div>
我们的显示如下：
②设置宽度
<div class="col-10" style="background-color: yellow">第一部分</div>
<div class="col-1" style="background-color: blueviolet">第二部分</div>
<div class="col-1" style="background-color: green">第三部分</div>
把上面class里改为col-数字，就可以自己设置每个栅格的占比：
③可变宽度的弹性空间
当我们对于不同等级的屏幕，我们可以设置不同的大小：col- -等级其中breakpoint可选为 空、sm、md、lg、xl。
当我们尺寸大于其等级的时候就会沿用此设置，小于它的时候，就会恢复默认：
<div class="col-md-2 col-5" style="background-color: yellow">第一部分</div>
<div class="col-md-8 col-2" style="background-color: blueviolet">第二部分</div>
<div class="col-md-2 col-5" style="background-color: green">第三部分</div>
④其余方式
还有很多比如：等宽多行、沟槽、沟槽间隙等，在中文翻译文档上查询即可：栅格系统
沟槽间隙：
b)对齐
①垂直对齐
当我们一行有宽度时，就可以使用垂直对齐的功能（因为要知道它这一行有多高才能知道底部在哪鸭）
我们将整个容器设置为150px，第一行设置为75px，使用底部对齐看看效果
<div class="container" style="background-color: red;height: 150px">
<div class="row align-items-end" style="height:75px">
<div class="col-md-2 col-5" style="background-color: yellow">第一部分</div>
<div class="col-md-8 col-2" style="background-color: blueviolet">第二部分</div>
<div class="col-md-2 col-5" style="background-color: green">第三部分</div>
</div>
</div>
②水平对齐
水平对齐不用太在意，后面会有偏移的教程，这能比水平对齐干更多的事，甚至实现特殊布局。
③其他对齐方式
还是参见文档：栅格系统
c)重排序
未标定顺序排前，有标定从1~12依次排序。
<div class="row align-items-end" style="height:75px">
<div class="col-md-4 order-12" style="background-color: yellow">第一部分</div>
<div class="col-md-4 order-1" style="background-color: blueviolet">第二部分</div>
<div class="col-md-4" style="background-color: green">第三部分</div>
</div>
d)偏移
offset-{breakpoint}-*进行指定页面大小的偏移
<div class="col-md-3 offset-3" style="background-color: yellow">第一部分</div>
<div class="col-md-3" style="background-color: blueviolet">第二部分</div>
<div class="col-md-3 offset-3" style="background-color: yellow">第一部分</div>
<div class="col-md-3 offset-3" style="background-color: blueviolet">第二部分</div>
三.后记
这些都是我记录的，我觉得比较重要的属性，当然更多详细的属性用法等，可以去页面查看。
