Bootstrap布局系统

一、布局介绍

• 说明

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

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

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

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

5. 自适应对应的响应式方式如下 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) { ... }
   

6. 从响应式的 media 可以看出，Bootstrap4 是以移动端为优先的。

二、栅格系统

• 说明

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

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

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

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

5. 首先，实现一个一行三列的布局，通过浏览器切换屏幕测试；

   <div class="container">
       <div class="row">
           <div class="col-sm">第一列</div>
           <div class="col-sm">第二列</div>
           <div class="col-sm">第三列</div>
       </div>
   </div>
   

6. 为了显示的更加清楚，可以给行列加对比鲜明的 CSS 来观察；

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

8. sm 表示屏幕类型，下面课程会详细讲解；

9. 如果我们采用的是.container-fluid，那么会 100%占用屏幕宽度；

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

10. 在.col-sm-*的星号位置，还可以强制设定每列所占有的栅格列；

  ```html
  <div class="container-fluid">
      <div class="row">
          <div class="col-sm-4">第一列</div>
          <div class="col-sm-4">第二列</div>
          <div class="col-sm-4">第三列</div>
      </div>
  </div>
  ```

11. 所占的栅格位正好是 12 列，超过 12 列则会换行，小于 12 列则不能 100%；

12. 以上智能计算和强制设置栅格位都是等宽的，我们也可以设置不对称的；

       <div class="container-fluid">
              <div class="row">
                  <div class="col-sm-8">第一列</div>
                  <div class="col-sm-4">第二列</div>
              </div>
          </div>

三、栅格等级

• 说明

1. 栅格系统中有五个栅格等级：

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

2. 如果同时是使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则：

   <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>
   

3. 剩余平分：栅格系统支持只指定其中一种或几种，其它随机的方式，指定数字奇偶均可：

   <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>
   

4. 可以通过两个或以上来实现不同设备不同比例的混合布局：

    <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>
   

5. 等宽多列：在希望列换行的位置，通过插入一个.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>
   

6. 等宽一列：如果强制设置了 所跨的栅格数目（如：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>