image.png

1.栅格系统非常重要（bootstrap的使用需要联网）

栅格系统的介绍：

  • container-fluid：取得是body父级的宽，依次向上取
  • container ：有固定值，但是也根据用户的手机尺寸微变。

例：

  1. <style>
  2.     .row div{
  3.         height: 100px;
  4.         background: green;
  5.         border: 1px solid #000;
  6.         color: #fff;
  7.     }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="container-fluid"> <!-- container-fluid：取得是body父级的宽，依次向上取 -->
  12.     <div class="row">    //行
  13.         <div class="col-xl-1">第1列</div><!-- 响应层分区：3.0和4.0是不一样的 -->
  14.         <div class="col-xl-1">第2列</div><!-- 4.0使用弹性盒模型，3.0使用浮动 -->
  15.         <div class="col-xl-1">第3列</div>
  16.         <div class="col-xl-1">第4列</div>
  17.         <div class="col-xl-1">第5列</div>
  18.         <div class="col-xl-1">第6列</div>
  19.         <div class="col-xl-1">第7列</div>
  20.         <div class="col-xl-1">第8列</div>
  21.         <div class="col-xl-1">第9列</div>
  22.         <div class="col-xl-1">第10列</div>
  23.         <div class="col-xl-1">第11列</div>
  24.         <div class="col-xl-1">第12列</div>
  25.     </div>
  26.     <div class="row"><!-- 最大不能超过12 -->
  27.         <div class="col-xl-2">占2列</div>
  28.         <div class="col-xl-7">占7列</div>
  29.         <div class="col-xl-1">占1列</div>
  30.         <div class="col-xl-2">占2列</div>
  31.     </div>
  32.     <div class="row">
  33.         <div class="col-xl-10">占10列</div>
  34.         <div class="col-xl-2">占2列</div>
  35.     </div>
  36.     <div class="row">
  37.         <div class="col-xl-12">占12列</div>
  38.     </div>
  39.     <div class="row"><!-- 超过12就会换行 -->
  40.         <div class="col-xl-6">占6列</div>
  41.         <div class="col-xl-8">占8列</div>
  42.     </div>
  43.     <div class="row"><!-- 无样式 -->
  44.         <div class="col-xl-15">占15列</div>
  45.     </div>
  46. </div>
  47. </body>

2.栅格系统的特征

当屏幕尺寸满足好几个条件时，取最大屏幕的尺寸作为容器固定的宽度
image.png

<div class="container"><!-- container：有具体数值的 -->
        <div class="row">
            <div class="col-xl-3">xl为超大屏。屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸<1200的时候，一行只能设置1列</div>
            <div class="col-xl-3"></div>
            <div class="col-xl-3"></div>
            <div class="col-xl-3"></div>
        </div>
        <div class="row mt-5">
            <div class="col-lg-4">lg为大屏。屏幕宽度>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列</div>
            <div class="col-lg-4"></div>
            <div class="col-lg-4"></div>
        </div>
        <div class="row mt-5">
            <div class="col-md-6">md为中等屏。屏幕宽度>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列</div>
            <div class="col-md-6"></div>
        </div>
        <div class="row mt-5">
            <div class="col-sm-3">sm为小屏。屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列</div>
            <div class="col-sm-3"></div>
            <div class="col-sm-3"></div>
            <div class="col-sm-3"></div>
        </div>
        <div class="row mt-5">
            <div class="col-4">col为超小屏。屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列</div>
            <div class="col-4"></div>
            <div class="col-4"></div>
        </div>
  </div>

3.设置等宽列

image.png

<!-- 设置等宽列，平分宽度，通过.col的class去设置 -->
<div class="row mt-5">
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
    <div class="col">等宽列</div>
</div>

4.设置多行等宽列

设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行
image.png

<div class="row mt-5">
    <div class="col">等宽列1</div>
    <div class="col">等宽列2</div>
    <div class="w-100" style="height: auto;border: none;"></div>    <!-- 需要设置样式 -->
    <div class="col">等宽列3</div>
    <div class="col">等宽列4</div>
</div>