如何理解Bootstrap中的mb-5类属性

Question

我下载了一个 Bootstrap 4 示例模板，该模板每行加载“bootstrap.min.css”：

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

现在，我想对以下代码进行格式更改：

<h1 class="mb-5">I want to change formatting for this part</h1>

如果我查看“bootstrap.min.css”文件，我会看到对“h1”标头中指示的“mb-5”类属性的单个引用：

.mb-5,
.my-5 {
  margin-bottom: 3rem !important; }

此处，仅指定样式为“margin-bottom: 3rem !important”

在哪里可以找到该 mb-5 类的其余属性，例如字体、字体大小/颜色、背景颜色等？

Answer 1

首先，我强烈建议您阅读Bootstrap 4 文档。与这个关于类的问题相关的文档可以在这里mb-5找到。它详细解释了有关课程的信息。这门课都是关于元素间距的......mb-5

使用速记类将响应友好的边距或填充值分配给元素或其边的子集。包括对单个属性、所有属性以及垂直和水平属性的支持。

因此，特别是对于mb-5类，这是尺寸为 5 的边距底部间距。正如您所发现的，该类只有margin-bottom. 这就是这个类所做的全部事情。

要查找所有其他样式属性，我建议您使用某种开发工具，例如 Chrome 的开发工具，并检查 h1 以查找其所有相关样式。

建议为元素创建您自己的类，并更改单独链接的 CSS 文件中的任何属性。这样，您就不会更改 Bootstrap 的任何文件，以防以后需要恢复其属性。