网格(Grid)

admin

一.网格特点
1.十二列系统
2.六个响应层

二.六个默认响应层
1.特小（xs）
2.小（sm）
3.中（md）
4.大（lg）
5.特大（xl）
6.超大（xxl）

三.类前缀与视口关系图
                xs                sm                md                lg                xl                xxl
                >=0    >=576    >=768   >=992   >=1200  >=1400
类前缀  col    col-sm   col-md  col-lg  col-xl  col-xxl

四.Grid实例
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

五.等宽
<div class="row">
   <div class="col">
     1 of 2
   </div>
   <div class="col">
     2 of 2
   </div>
</div>

六.设置一列宽度
<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
</div>

七.可变宽度内容
<div class="row">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
</div>

八.所有断点
<div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

<div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
</div>

九.堆叠到水平
<div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>

<div class="row">
     <div class="col-sm">col-sm</div>
     <div class="col-sm">col-sm</div>
     <div class="col-sm">col-sm</div>
</div>

十.关联使用
<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

<div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

十一.行列
<div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
</div>

十二.自动行列
<div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
</div>

十三.不均等行列
<div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
</div>

十四.关联行列
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
</div>

十五.嵌套使用
<div class="row">
  <div class="col mb-1">
    <img src="holder.js/100px100">
  </div>

  <div class="col mb-1">
    <img src="holder.js/100px100?theme=sky">
  </div>

  <div class="col mb-1">
    <div class="row">
      <div class="col">
        <img src="holder.js/100px100?theme=sky">
      </div>

      <div class="col">
        <img src="holder.js/100px100">
      </div>

      <div class="col">
        <img src="holder.js/100px100?theme=sky">
      </div>
    </div>
  </div>
</div>