Bootstrap4的栅格系统详解和与3的异同

妖狐艹你老母 2023-07-24 08:42 1阅读 0赞

# 一、大小尺寸 #

### bootstrap4的栅格系数 ###

与bootstrap3相比多了一个576px的断点，其表示为.col-  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

### bootstrap3的栅格系数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]  
**下面为了简写我就用b4代表bootstrap4了**

# 二、容器 #

b4的容器与b3的容器差别不大，唯一有差别的是b4的固定容器（container）可以增加断点，**如.container-\{breakpoint\}**，**其含义就是不同的断点就对应着不同的媒体查询**  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]

# 三、原理 #

**Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容**，不同于旧版3.0，**新版是完全基于flexbox流式布局构建的**，**完全支持响应式标准**

# 四、列的布局方式 #

### 列的平均分（col、col-sm、col-md、col-lg、col-xl） ###

<div class="container">				/*固定容器*/
      <div class="row">
        <div class="col-lg">			/*在lg模式下平均分成3份，col、col-sm、col-md、col-xl也是相同的意思*/
          三分之一空间占位
        </div>
        <div class="col-lg">
          三分之一空间占位
        </div>
        <div class="col-lg">
          三分之一空间占位
        </div>
      </div>
    </div>

##### 结果图: #####

![在这里插入图片描述][20200411121257487.png]  
但是当使用col、col-sm、col-md、col-lg、col-xl的时候列数就不一定是12列了，如：(这里就不写代码了)  
![在这里插入图片描述][20200411120653347.png]  
**当然还有另一个例子**

<div class="container">
      <div class="row">
        <div class="col">						/*剩余平均分*/
          1 of 3
        </div>
        <div class="col-6">						/*在col-模式下占据6列*/
          2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
        </div>
        <div class="col">						/*剩余平均分*/
          3 of 3
        </div>
      </div>
      <div class="row">
        <div class="col">
          1 of 3
        </div>
        <div class="col-5">						/*奇偶不影响*/
          2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
        </div>
        <div class="col">
          3 of 3
        </div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][20200411121633463.png]

### col-\{breakpoint\}-auto ###

使用 col-\{breakpoint\}-auto ，可以实现根据其**内容的自然宽度来对目标列进行大小调整**。.

<div class="container">
      <div class="row">
        <div class="col">						/*剩余的列数平均分*/
          1 of 3
        </div>
        <div class="col-md-auto">				/*该列的大小为内容的宽度*/
          可变宽度内容自由伸张，左右宽度不变。
        </div>
        <div class="col">						/*剩余的列数平均分*/
          3 of 3
        </div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][2020041112243270.png]

# 五、行的布局方式 #

### 行的分割（w-100类） ###

这里利用的是w-100类，意思是width：100%，强制把一行分成了两行

<div class="container">
      <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="w-100"></div>					/*使用w-100类进行强制分割*/
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>

![在这里插入图片描述][20200411120820662.png]  
**当然推荐使用row来分隔行，因为利于阅读**

### .row-cols-\* ###

使用 .row-cols-\* 类能够定义一个row空间中可放的列数，并支持不同的断点如.row-cols-md-4, .row-cols-3，**注意需要要写在 .row空间之中**

<div class="container">
      <div class="row row-cols-3">
        <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-md-4">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][2020041112353991.png]  
![在这里插入图片描述][20200411123622153.png]

# 六、对齐 #

**因为b4是基于flexbox流式布局构建的**，所以有类似于flex里面的justify-content、align-items、align-self

### align-items-start、align-items-center、align-items-end（针对容器内的目标行） ###

<div class="container">
      <div class="row align-items-start">			/*上*/
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
      <div class="row align-items-center">			/*中*/
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
      <div class="row align-items-end">				/*下*/
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]

### align-self-start、align-self-center、align-self-end（针对特定行内的目标列） ###

<div class="container">
      <div class="row">
        <div class="col align-self-start">			/*上*/
          One of three columns
        </div>
        <div class="col align-self-center">			/*中*/
          One of three columns
        </div>
        <div class="col align-self-end">			/*下*/
          One of three columns
        </div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][20200411124252418.png]

### justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between（针对容器内的特定列） ###

<div class="container">
      <div class="row justify-content-start">
        <div class="col-4">
          One of two columns
        </div>
        <div class="col-4">
          One of two columns
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-4">
          One of two columns
        </div>
        <div class="col-4">
          One of two columns
        </div>
      </div>
      <div class="row justify-content-end">
        <div class="col-4">
          One of two columns
        </div>
        <div class="col-4">
          One of two columns
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col-4">
          One of two columns
        </div>
        <div class="col-4">
          One of two columns
        </div>
      </div>
      <div class="row justify-content-between">
        <div class="col-4">
          One of two columns
        </div>
        <div class="col-4">
          One of two columns
        </div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]

# 七、沟槽的清除 #

在行内使用**no-gutters**类即可

##### 结果图： #####

![在这里插入图片描述][20200411125555388.png]

# 八、重排序 #

使用 .order-\* 选择符，可以对DIV空间进行 **可视化排序**，**系统提供了.order-1到.order-12的12个级别的顺序**，*也有.order-first来快速更改一个顺序到最前面，但如果没有定义顺序则按照原来的顺序（类似与b3内的.col-md-push- 和 .col-md-pull-\*）*\*

<div class="container">
      <div class="row">
        <div class="col">
          1号空间-未定义序号，位置不变。
        </div>
        <div class="col order-12">
          2号空间-排最后。
        </div>
        <div class="col order-1">
          3号空间-放第1但受1号空间不变影响居第2位。 
        </div>
        <div class="col order-first">
          4号空间-优先排序，占第1位。
        </div>
      </div>
    </div>

##### 结果图： #####

![在这里插入图片描述][20200411131401599.png]

# 九、列偏移 #

使用响应式的.offset-\*栅格偏移方法，也可以增加断点（与b3的.col-md-offset-\*类似）

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

##### 结果图： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]

# 十、Margin移动布局 #

在b4内可以使用.ml-auto与.mr-auto来强制隔离两边的距离，**实现类水平隔离的效果。**

##### 结果图： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]

（上面内容是根据个人理解与官网的资料整理而成的）

其他内容也可以参考[这里][Link 1]

本文只用与个人学习与记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/f284112a72d1491c8c1c031cea7fd4ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/02e0a934f5ca45ba94240c1b22b71d23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230528/50cc4c34699d4724b478cb944d87f021.png
[20200411121257487.png]: /images/20230528/e918120c52004adc82df7e0550785a76.png
[20200411120653347.png]: /images/20230528/24fbe161ec244c839efa8b7fea32256f.png
[20200411121633463.png]: /images/20230528/c0935da8225b482e8cae94210d9aad21.png
[2020041112243270.png]: /images/20230528/e54621b813784055988a69abb87a4c2a.png
[20200411120820662.png]: /images/20230528/dcbbbd490baf4747853574eb430ad021.png
[2020041112353991.png]: /images/20230528/a02874d0b292475fa502c89c83a7420a.png
[20200411123622153.png]: /images/20230528/5a79972fa19f43259c0315946a397a27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]: /images/20230528/3b1aaf22789c41cea5d0230a943073f5.png
[20200411124252418.png]: /images/20230528/8932b043295f46538c66fe985cb6142f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]: /images/20230528/fcc779c3dbc04ae98f2207894b425b47.png
[20200411125555388.png]: /images/20230528/f0ed88549eb74f16afb73218445590f5.png
[20200411131401599.png]: /images/20230528/06fca3f425db411c83209d6248f5db68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]: /images/20230528/a3d587b558f144ab9504514fad2b2af1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]: /images/20230528/cc809394231a4d62b6d76d04d1797f44.png
[Link 1]: http://code.z01.com/v4/content/typography.html