Bootstrap5 文字/排版


Bootstrap 5 默认设置

Bootstrap 5 使用默认值font-size1rem(默认为 16px),及其line-height是1.5。

此外,所有<p>元素有margin-top: 0margin-bottom: 1rem(默认为 16 像素)。


<h1> - <h6>

Bootstrap 5 样式 HTML 标题 (<h1><h6>)具有更粗的字体粗细和响应式字体大小。

您还可以使用.h1.h6如果需要,其他元素上的类可以使它们充当标题:

示例

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>
亲自试一试 »

显示标题

显示标题用于比普通标题(更大的字体大小和更轻的字体粗细)更加突出,有六种类别可供选择:.display-1.display-6:

示例

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

亲自试一试 »

<小>

在 Bootstrap 5 中,HTML<small>元素(以及.smallclass) 用于在任何标题中创建较小的辅助文本:


<标记>

Bootstrap 5 样式<mark>.mark具有黄色背景颜色和一些填充:

示例

Use the mark element to highlight text.

亲自试一试 »


<缩写>

Bootstrap 5 将设置 HTML 样式<abbr>底部带有虚线边框且悬停时带有问号的光标的元素:

示例

The WHO was founded in 1948.

亲自试一试 »

<块引用>

添加.blockquote类到一个<blockquote>当引用其他来源的内容块时。在命名源时,例如 "from WWF's website",请使用.blockquote-footer类:


<dl>

Bootstrap 5 将设置 HTML 样式<dl>元素的方式如下:


<代码>

Bootstrap 5 将设置 HTML 样式<code>元素的方式如下:


<KBD>

Bootstrap 5 将设置 HTML 样式<kbd>元素的方式如下:


<前>

Bootstrap 5 将设置 HTML 样式<pre>元素的方式如下:


更多版式课程

可以添加下面的 Bootstrap 5 类来进一步设置 HTML 元素的样式:

Class Description Example
.lead Makes a paragraph stand out 尝试一下
.text-start Indicates left-aligned text 尝试一下
.text-break Prevents long text from breaking layout 尝试一下
.text-center Indicates center-aligned text 尝试一下
.text-decoration-none Removes the underline from a link 尝试一下
.text-end Indicates right-aligned text 尝试一下
.text-nowrap Indicates no wrap text 尝试一下
.text-lowercase Indicates lowercased text 尝试一下
.text-uppercase Indicates uppercased text 尝试一下
.text-capitalize Indicates capitalized text 尝试一下
.initialism Displays the text inside an <abbr> element in a slightly smaller font size 尝试一下
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) 尝试一下
.list-inline Places all list items on a single line (used together with .list-inline-item on each <li> elements) 尝试一下