Boostrap中栅格布局的实现
作者：Itcodewizard
添加bootstrap核心样式文件：
<!-- Bootstrap核心css文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
一、等宽列
1、“.container”是一个响应式的、固定宽度的容器。在如下示例中可以看出，整个div盒子是居中的，并且距屏幕两边有一定宽度的空白。
2、“.mb-4”中的m指的是margin（外边距），同理，"pb-4"中的p指的是padding（内边距）；其中的b指的是：b - 用来设置margin-bottom或者padding-bottom的距离；"py-3"中的y指的是：用来设置*-top和*-bottom的距离。
内/外边距：
m-1或p-1：padding: .25rem!important;
m-2或p-2 ： padding: .5rem!important;
m-3或p-3 ： padding: 1rem!important;
m-4或p-4 ： padding: 1.5rem!important;
m-5或p-5 ： padding: 3rem!important;
所以，mb-4 指的设置该div的margin-bottom：1.5rem!important；py-3 指的是设置该div的padding-top和padding-bottom：1rem!important;
<div class="container"> <h3 class="mb-4">等宽列</h3> <div class="row"> <div class="col border py-3 bg-light">二分之一</div> <div class="col border py-3 bg-light">二分之一</div> </div> <div class="row"> <div class="col border py-3 bg-light">三分之一</div> <div class="col border py-3 bg-light">三分之一</div> <div class="col border py-3 bg-light">三分之一</div> </div> <div class="row"> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> </div> <div class="row"> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> </div>
运行示例：
二、可变宽度的内容
1、来说说justify-content-md-center，它用于在中等屏幕尺寸（md）上设置容器内的子元素水平居中。这个类是用于flexbox布局的一部分，justify-content-md-center 会设置 justify-content 属性为 center，这会使得子元素在主轴方向上居中。
2、那justify-content又是个什么东东呢，它是Bootstrap中用于控制元素在容器中水平对齐方式的类，justify-content属性可以应用于具有display: flex或display: inline-flex的容器元素上。它有以下几个取值：
| 取值 | 含意 |
|---|---|
| start | 默认值，元素在容器的起始位置对齐。 |
| end | 元素在容器的末尾位置对齐 |
| center | 元素在容器的中间位置对齐 |
| between | 元素在容器中均匀分布，首个元素在起始位置，末尾元素在末尾位置 |
| around | 元素在容器中均匀分布，两侧留有相等的空间 |
| evenly | 元素在容器中均匀分布，包括首个元素和末尾元素 |
justify-content属性可以用于创建各种布局，例如居中对齐、两端对齐、等间距对齐等。它在响应式网页设计和移动应用程序开发中非常有用。
3、在class="col col-lg-2"和class="col-md-auto"中都是什么意思呢？
| 名称 | 含意 |
|---|---|
| .col- | 针对所有设备 |
| .col-sm- | 平板 - 屏幕宽度等于或大于 576px |
| .col-md- | 桌面显示器 - 屏幕宽度等于或大于 768px |
| .col-lg- | 大桌面显示器 - 屏幕宽度等于或大于 992px |
| .col-xl- | 超大桌面显示器 - 屏幕宽度等于或大于 1200px |
在每个列与列间隔30px。
4、如下图，定义了几个类型的布局容器，会在相应设备上进行响应。举个例子，如.container-md，在屏宽<=576px时会满屏不留margin和panding，在屏宽大于576px小于768px时，则（div盒子）显示为最小的宽度为576px，以此类推，当屏宽大于或等于768px时，小于992px时，则（div盒子）显示为最小宽度为768px。
<div class="container"> <h3 class="mb-4">可变宽度的内容</h3> <div class="row justify-content-md-center"> <div class="col col-lg-2 border py-3 bg-light">左</div> <div class="col-md-auto border py-3 bg-light">中(在屏幕>=768时，可根据内容自动调整列宽)</div> <div class="col col-lg-2 border py-3 bg-light">右</div> </div> <div class="row"> <div class="col border py-3 bg-light">左</div> <div class="col-md-auto border py-3 bg-light">中(在屏幕>=768时，可根据内容自动调整列宽)</div> <div class="col col-lg-2 border py-3 bg-light">右</div> </div> </div>
三、多列等宽
行的分割（w-100类）
这里利用的是w-100类，意思是width：100%，强制把一行分成了两行
<div class="container"> <h3 class="mb-4">等宽多列</h3> <div class="row"> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> <div class="w-100"></div> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> </div> </div>
四、混合排列
混合搭配，在小于md型的设备上显示为一个全宽列和一个半宽列，在大于等于md型设备上显示为一列，分别占八份和一份
<div class="container"> <h3 class="mb-4"> 混合搭配，在小于md型的设备上显示为一个全宽列和一个半宽列， 在大于等于md型设备上显示为一列，分别占八份和一份 </h3> <div class="row"> <div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div> <div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div> </div> <div class="row"> <div class="col-6 border py-3 bg-light">.col-6</div> <div class="col-6 border py-3 bg-light">.col-6</div> </div> </div>
五、删除边距
通过使用.no-gutters类，没有沟槽
<div class="container"> <h3 class="mb-4">删除边距</h3> <div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8 border py-3 bg-light">.col-12 col-sm-6 .col-md-8</div> <div class="col-12 col-md-4 border py-3 bg-light">.col-12 .col-md-4</div> </div> </div>
六、排列顺序
通过使用order- 类来实现排序。
注：order-first和order-last顺序设置时候不会出现上面那种问题，设置第一个就是第一个，设置最后就是最后，且优先级比设置数字要高
<div class="container"> <h3 class="mb-4">排列顺序</h3> <div class="row no-gutters"> <div class="col order-12 border py-3 bg-light">order-12</div> <div class="col order-1 border py-3 bg-light">order-1</div> <div class="col order-6 border py-3 bg-light">order-6</div> <div class="col order-2 border py-3 bg-light">order-2</div> <div class="col border py-3 bg-light">col</div> </div> </div>
结果如下：
七、偏移类示例
网格列偏移是通过类名offset- * - * 来设置的
第一个号是表示屏幕设备类型例如sm，md，lg等等
第二个号是表示偏移度可以设置1-11的数字
如：offset-md-3,是代表向右偏移3个格
<div class="container"> <h3 class="mb-4">偏移类示例</h3> <div class="row"> <div class="col-md-6 offset-md-3 border py-3 bg-light">.col-md-6 .offset-md-3</div> </div> <div class="row"> <div class="col-md-4 offset-md-1 border py-3 bg-light">.col-md-4 .offset-md-1</div> <div class="col-md-4 offset-md-2 border py-3 bg-light">.col-md-4 .offset-md-2</div> </div> <div class="row"> <div class="col-md-4 border py-3 bg-light">.col-md-4</div> <div class="col-md-4 offset-md-4 border py-3 bg-light">.col-md-4 .offset-md-4</div> </div> </div>
八、使用margin类实现列偏移
ml-* 类用于实现列（column）的左侧偏移。具体来说，ml-* 中的 m 表示 margin（外边距），l 表示 left（左侧），* 则表示偏移的列数。通过添加 ml-* 类，可以让列在网格系统中向右偏移指定数量的列，从而实现灵活的布局设计。
例如，ml-2 表示向右偏移 2 列，即让列向右移动 2 个网格列的宽度。这样可以在设计网页布局时，调整元素之间的空隙或位置，使布局更加灵活美观。
Bootstrap 实现列偏移的原理是通过设置列元素的外边距（margin）来实现偏移效果。通过为列元素添加相应的 ml-* 类，Bootstrap 在内部处理了这些类，并应用了对应的 CSS 样式，使得列元素在页面中向右偏移指定数量的列。
在 Bootstrap 的 CSS 文件中，类似于以下的样式会被应用到具有 ml-* 类的列元素上，实现列偏移的效果，这些样式会根据列数的不同，将适当的外边距应用到列元素上，实现列偏移的效果。这样，开发者可以通过简单地为列元素添加相应的 ml-* 类，实现页面布局中元素的位置调整，从而实现更加灵活和多样化的布局设计。
<div class="container"> <h3 class="mb-4">使用margin类实现列偏移</h3> <div class="row"> <div class="col-md-4 border py-3 bg-light">.col-md-4</div> <div class="col-md-4 ml-auto border py-3 bg-light">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-12 border py-3 bg-light">.col-md-12</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto border py-3 bg-light">.col-auto mr-auto</div> <div class="col-auto border py-3 bg-light">.col-auto</div> </div> </div>
九、嵌套示例
在 Bootstrap 中，嵌套是一种常见的布局技术，可以用来创建复杂的网页布局结构。嵌套的原理是通过在一个列（column）中再嵌套一个行（row）和列的结构，从而实现多层次的布局。
Bootstrap 的网格系统是基于12列的布局系统构建的，通过将页面分割为等分的12列，开发者可以自由地组合和嵌套这些列，实现灵活的布局设计。在实现嵌套布局时，开发者可以在一个列中再创建一个新的行，然后在这个新的行中继续添加列，以此类推，实现多层次的嵌套结构。
<div class="container"> <h3 class="mb-4">嵌套</h3> <div class="row"> <div class="col-12 col-lg-6"> <div class="row border no-gutters"> <div class="col-12 col-sm-3 border bg-light">123</div> <div class="col-12 col-sm-9 pl-3">李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在清水</div> </div> </div> <div class="col-12 col-lg-6"> <div class="row border no-gutters"> <div class="col-12 col-sm-3 border bg-light">321</div> <div class="col-12 col-sm-9 pl-3">1李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在清水</div> </div> </div> </div> </div>
到此这篇关于Boostrap中栅格布局的实现的文章就介绍到这了,更多相关Boostrap 栅格布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！