bootstrap栅格系统的使用 适合初学者

/ 栅格系统底层依托于媒体查询
 使用栅格系统最外层必须使用：
 container-fluid: 宽度是100%，取的是body的宽度
 <div class="container-fulid">
     // 行
     <div class="row">
         // col-1自动，默认大小是小于576px 后面的数字是占用多少列
            col-sm-1 默认是大于576px
            col-md-1 默认是大于768px
            col-lg-1 默认是大于992px
            col-xl-1 默认是大于1200px
         <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      所有列里面的num值在一行中值必须为12
        </div>
 </div>
 container: 宽度不是固定的，有默认值的，根据用户的屏幕大小的值来变化
 <div class="container">
     // 行
     <div class="row">
        // col-1自动，宽度小于576px,宽度为auto, 宽度小于576px的时候一行用于可以设置12列
            col-sm-1 默认是大于576px 小等屏幕 使用container 固定值540px 宽度大于576px， 一行可以设置12列， 小于的话只能设置1列
            col-md-1 默认是大于768px 中等屏幕 使用container 固定值720px 屏幕宽度大于768px， 可以设置12列， 小于只能设置1列
            col-lg-1 默认是大于992px 大屏 ， 使用container 固定在960px 屏幕宽度大于992px,可以设置12列，小于的画只能设置1列
            col-xl-1 默认是大于1200px 超大屏， 使用container 固定值为 1140px, 屏幕宽度小于1200px 只能设置一列
         <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
            所有列里面的num值在一行中值必须为12
     </div>
 </div>
    // 设置一个等宽列
    <div class="container">
        <div class="row">
            // 这里设置多少就是多少个等宽列
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            // 设置多行等宽列
             <div class="col"></div>
            <div class="col"></div>
            <div class='w-100'></div> 这个盒子就是用来换行的
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>
   //设置一个列宽， 剩下的自动平分
   <div class="container">
        <div class="row">
          <div class="col-sm-7">小屏幕下占7列， 是小于576px的才是小屏幕</div>
          // 这里设置多少，剩余的宽度就会被下面的div自动平分
          <div class='col'></div>
          <div class='col'></div>
          <div class='col'></div>
        </div>
    </div>
    // 根据内容调整列的宽度 使用.col-{break-point}-auto 
     <div class="container">
        <div class="row">
          <div class=‘col-md-auto>z中等屏幕大小 大于768px</div>
          <div class='col'>中间平分</div>
          <div class='col-lg-2'>在大屏中占2列， 大小为大于992px</div>
        </div>
    </div>
    // 设置所有尺寸下都占有同样的列数 .col-*
     <div class="container">
        <div class="row">
          <div class=‘col-8‘>所有尺寸下都占8列 小屏 小于576px</div>
          <div class=‘col-4’>所有尺寸下都占4列</div>
      </div>
    </div>
    // 混合排列，组合模式
     1. 在超大屏幕下，一行显示6个div, 一个div应该占2列
     2. 在大屏幕下， 一行显示4个div 一个div应该占3列
     3. 在中等屏幕下  一行显示3个div  一个div应该占4列
     4. 在小屏幕下   一行显示2个div  一个div应该占6列
     5. 在超小屏幕下  一行显示1个div 一个div应该占12列
     <div class="row">
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个 小屏显示2个 超小屏幕1个</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个 小屏显示2个 超小屏幕1个</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个 小屏显示2个 超小屏幕1个</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个 小屏显示2个 超小屏幕1个</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个 小屏显示2个 超小屏幕1个</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个 小屏显示2个 超小屏幕1个</div>
     </div>
     // 对齐 bootstrap 4.x 的版本 才会有对齐
     1. 垂直对齐 
     行对齐方式：align-items-start 顶对齐
                 align-items-center: 中对齐
                 align-items-end: 底对齐
     列单独对齐： align-self-start 顶对齐
                 align-self-center: 中对齐
                 align-self-end: 底对齐
     2. 对平对齐： 1.justify-content-start: 左对齐
                  2.justify-content-center: 居中对齐
                  3.justify-content-end: 居右对齐
                  4.justify-content-around:分散居中对齐（每个元素的间距相同）
                  5.justify-content-bewteen:  左右两端对齐，（元素之间的间距自动平分） 
    // 列排序 使用order-{autopoint}   cautopoint的值是1-12  order-first: 第一列  order-last:最后一列   可以用于seo
    <div class="row">
        <div class="col order-6">第一列</div>
        <div class="col order-xl-5">第二列 只有在大屏情况下才会排序</div>
        <div class="col">第三列</div>
    </div>
    //  列偏移 offset-{autopoint}  便宜一个div,后面的div会跟着偏移
    <div class="row">
        <div class="col-md-4 offset-md-4">第一列,往右便宜4列</div>
        <div class="col-md-4">第二列</div>
    </div>
    // 间距 使用margin工具 可以让列之间产生间距 
    mr-{breakpoint}-auto 使右侧的列远离到最右边
    ml-{breakpoint}-auto 使左侧的列远离到最左边
   <div class="row md-5">
       <div class="col-md-4"></div>
       <div class="col-md-2 ml-auto">自动偏移到右边，左边有一定的间距</div>
   </div>
   // 嵌套  每一个列里卖弄可以继续放行  那里面的列会继续分成12列
   <div class="row mt-5">
       <div class="col-sm-9">
           小屏占9列
           <div class="row">
               <div class="col-sm-8 col-6">小屏下面占8列，超小屏幕占6列</div>
               <div class="col-sm-4 col-6">小屏下面占4列，超小屏幕占6列</div>
           </div>
       </div>
       <div class="clo-sm-3"></div>
   </div>