Bootstrap 4 - 文本

17 Mar 2025 | 6 分钟阅读

Bootstrap 4 中文本或排版的默认设置

默认情况下,Bootstrap 4 的字体大小为 16px,行高为 1.5。

默认情况下,字体系列为 "Helvetica Neue", Helvetica, Arial, sans-serif。

除此之外,所有 <p> 元素的 margin-top 为 0,margin-bottom 大约为 1 rem,默认情况下为 16px。

Bootstrap 4 中的标题

Bootstrap 4 提供了六种标题样式。 所有标题都具有不同的字体粗细和字体大小。 标题如下所示

<h1> - 2.5 rem 或 40 px

<h2> - 2 rem 或 32 px

<h3> - 1.75 rem 或 28 px

<h4> - 1.5 rem 或 24 px

<h5> - 1.25 rem 或 20 px

<h6> - 1 rem 或 16 px

示例代码解释 Bootstrap 4 中的标题

立即测试

输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的展示标题

Bootstrap 4 中的展示标题可用于创建比普通标题更引人注目的标题,即更大的字体大小和更细的字体粗细,并且有四个类可供选择,分别是

.display-1, .display-2, .display-3, .display-4

Bootstrap 4 中展示标题的示例代码

立即测试

以上代码的输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的 <small> 元素

Bootstrap 4 中的 <small> 元素可用于在任何标题中创建更细和辅助的文本。

Bootstrap 4 中 <small> 元素的示例代码

立即测试

以上代码的输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的 <abbr> 元素

Bootstrap 4 中的 <abbr> 元素有助于创建点状边框底部。

Bootstrap 4 中 <abbr> 元素的示例代码

立即测试

以上代码的输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的 <blockquote> 元素

.blockquote 类应添加到 <blockquote> 中,以便引用来自其他来源的内容块。

下面给出了 <blockquote> 元素的示例代码

立即测试

以上代码的输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的 <mark> 元素

在 Bootstrap 4 中,HTML <mark> 元素包含黄色背景颜色和一些填充。 <mark> 元素可用于突出显示网页中的文本。

下面给出了 <mark> 元素的示例代码

立即测试

以下代码的输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的 <kbd> 元素

Bootstrap 4 中的 <kbd> 元素可用于显示通常通过键盘输入的输入。

Bootstrap 4 中 <kbd> 元素的示例代码

立即测试

上面代码的输出结果如下

Bootstrap 4 - Text

Bootstrap 4 中的 <code> 元素

Bootstrap 4 中的 <code> 元素可用于在代码元素中嵌入代码的内联代码段。

Bootstrap 4 中 <code> 元素的示例代码

立即测试

以上代码的输出结果将是

Bootstrap 4 - Text

Bootstrap 4 中的 <dl> 元素

Bootstrap 4 中的 <dl> 元素可用于创建描述列表。 描述列表非常有用,因为它可以用于列出网页中的项目。

Bootstrap 4 中 <dl> 元素的示例代码

立即测试

上面代码的输出结果将是

Bootstrap 4 - Text
下一个主题Bootstrap 4 分页