第二谈：布局系统

本节课我们来开始学习 Bootstrap 布局知识，了解栅格系统以及如何分配列、栅格等级并且简单了解不同等级的作用。

一．布局介绍

对于容器布局，Bootstrap4.x 提供了.container 和.container-fluid 两种；

这两种样式是启用布局栅格系统最基本的要素；

.contianer 是固体自适应方式，.container-fluid 是流体 100%自适应方式；

容器布局可以嵌套，但一般来说，不推荐且很少使用到：

自适应对应的响应式方式如下 media：
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
从响应式的 media 可以看出，Bootstrap4 是以移动端为优先的。

二．栅格系统

Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统；

基于 12 列的布局、5 种响应尺寸（面向不同屏幕设备）；

完全使用 flexbox 流式布局构建的，完全支持响应式标准；

具体采用 div 容器的行、列和对齐内容来构建响应式布局；

首先，实现一个一行三列的布局，通过浏览器切换屏幕测试；
      <div class="container">
          <div class="row">
              <div class="col-sm">第一列</div>
              <div class="col-sm">第二列</div>
              <div class="col-sm">第三列</div>
          </div>
      </div>
为了显示的更加清楚，可以给行列加对比鲜明的 CSS 来观察；

.row 表示一行，.col-*来表示一列，实现了智能三列；

sm 表示屏幕类型，本节先不去详细了解，后面的课会探讨；

如果我们采用的是.container-fluid，那么会 100%占用屏幕宽度；
      <div class="container-fluid">
          <div class="row">
              <div class="col-sm">第一列</div>
              <div class="col-sm">第二列</div>
              <div class="col-sm">第三列</div>
          </div>
      </div>
在.col-sm-*的星号位置，还可以强制设定每列所占有的栅格列；
      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-3">第一列</div>
              <div class="col-sm-3">第二列</div>
              <div class="col-sm-3">第三列</div>
          </div>
      </div>
所占的栅格位正好是 12 列，超过 12 列则会换行，小于 12 列则不能 100%；

以上智能计算和强制设置栅格位都是等宽的，我们也可以设置不对称的；
      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-8">第一列</div>
              <div class="col-sm-4">第二列</div>
          </div>
      </div>

三．栅格等级

栅格系统中有五个栅格等级，具体如下表：

超小屏幕<576px 小屏幕>=576px 中等屏幕>=768px 大屏幕>=992px 超大屏幕>=1200px

前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-

列数 12 列 12 列 12 列 12 列 12 列

如果同时是使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则；
      <div class="container">
          <div class="row">
              <div class="c col-sm-4 col-lg-6 col-xl-12">第一列</div>
              <div class="c col-sm-4 col-lg-6 col-xl-12">第二列</div>
              <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div>
          </div>
      </div>
栅格系统支持只指定其中一种或几种，其它随机的方式，指定数字奇偶均可；
      <div class="container">
          <div class="row">
              <div class="c col-sm">第一列</div>
              <div class="c col-sm-7">第二列</div>
              <div class="c col-sm">第三列</div>
          </div>
      </div>
可以通过两个或以上来实现不同设备不同比例的混合布局；
      <div class="container">
          <div class="row">
              <div class="c col-sm-8 col-xl-12">第一列</div>
              <div class="c col-sm-4 col-xl-12">第二列</div>
          </div>
      </div>
使用.w-100 可以切割栅格栏位，进行分行操作；
      <div class="container">
          <div class="row">
              <div class="c col">第一列</div>
              <div class="c col">第二列</div>
              <div class="w-100"></div>
              <div class="c col">第三列</div>
              <div class="c col">第四列</div>
          </div>
      </div>
如果强制设置了 col-3 数值，那切割后，将不会自动填充；
      <div class="container">
          <div class="row">
              <div class="c col-3">第一列</div>
              <div class="c col-3">第二列</div>
              <div class="w-100"></div>
              <div class="c col-3">第三列</div>
              <div class="c col-3">第四列</div>
          </div>
      </div>

	超小屏幕<576px	小屏幕>=576px	中等屏幕>=768px	大屏幕>=992px	超大屏幕>=1200px
前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数	12 列	12 列	12 列	12 列	12 列