添加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>
2819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
