Bootstrap 5 文本/排版
Bootstrap 5 默认设置
Bootstrap 5 使用默认的 font-size 为 1rem(默认 16px),其 line-height 为 1.5。
此外,所有 <p> 元素都有 margin-top: 0 和 margin-bottom: 1rem(默认 16px)。
<h1> - <h6>
Bootstrap 5 为 HTML 标题(<h1> 到 <h6>)设置了更粗的 font-weight 和响应式的 font-size。
如果您愿意,您也可以在其他元素上使用 .h1 到 .h6 类,使它们表现得像标题。
示例
<p class="h1">h1 Bootstrap 标题</p>
<p class="h2">h2 Bootstrap 标题</p>
<p class="h3">h3 Bootstrap 标题</p>
<p class="h4">h4 Bootstrap 标题</p>
<p class="h5">h5 Bootstrap 标题</p>
<p class="h6">h6 Bootstrap 标题</p>
自己动手试一试 »
显示标题
显示标题比普通标题更醒目(更大的 font-size 和更浅的 font-weight),有六个类可供选择:.display-1 到 .display-6。
<small>
在 Bootstrap 5 中,HTML <small> 元素(和 .small 类)用于在任何标题中创建更小、次要的文本。
<mark>
Bootstrap 5 会为 <mark> 和 .mark 设置黄色背景色和一些内边距。
<abbr>
Bootstrap 5 会为 HTML <abbr> 元素设置下划线为虚线,并在悬停时显示问号光标。
<blockquote>
当引用来自另一个来源的内容块时,请为 <blockquote> 添加 .blockquote 类。当引用来源时,例如“来自 WWF 的网站”,请使用 .blockquote-footer 类。
<dl>
Bootstrap 5 会对 HTML <dl> 元素进行如下样式设置:
<code>
Bootstrap 5 会对 HTML <code> 元素进行如下样式设置:
<kbd>
Bootstrap 5 会对 HTML <kbd> 元素进行如下样式设置:
<pre>
Bootstrap 5 会对 HTML <pre> 元素进行如下样式设置:
更多排版类
下面的 Bootstrap 5 类可以添加到 HTML 元素以进一步样式化:
| 类 | 描述 | 示例 |
|---|---|---|
.lead |
使段落脱颖而出 | 试一试 |
.text-start |
表示左对齐文本 | 试一试 |
.text-break |
防止长文本破坏布局 | 试一试 |
.text-center |
表示居中文本 | 试一试 |
.text-decoration-none |
移除链接的下划线 | 试一试 |
.text-end |
表示右对齐文本 | 试一试 |
.text-nowrap |
表示不换行文本 | 试一试 |
.text-lowercase |
表示小写文本 | 试一试 |
.text-uppercase |
表示大写文本 | 试一试 |
.text-capitalize |
表示大写文本 | 试一试 |
.initialism |
在 <abbr> 元素内显示文本,字体大小稍小 |
试一试 |
.list-unstyled |
移除列表项的默认列表样式和左外边距(适用于 <ul> 和 <ol>)。此类仅适用于直接子列表项(要移除嵌套列表的默认列表样式,也需将此类应用于任何嵌套列表) |
试一试 |
.list-inline |
将所有列表项放在一行上(与每个 <li> 元素的 .list-inline-item 一起使用) |
试一试 |