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应该占22. 在大屏幕下, 一行显示4个div 一个div应该占33. 在中等屏幕下  一行显示3个div  一个div应该占44. 在小屏幕下   一行显示2个div  一个div应该占65. 在超小屏幕下  一行显示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>
展开阅读全文
©️2019 CSDN 皮肤主题: 护眼 设计师: 闪电赇
应支付0元
点击重新获取
扫码支付

支付成功即可阅读