Bootstrap 5 使用默认值font-size
1rem(默认为 16px),及其line-height
是1.5。
此外,所有<p>
元素有margin-top: 0
和margin-bottom: 1rem
(默认为 16 像素)。
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
:
在 Bootstrap 5 中,HTML<small>
元素(以及.small
class) 用于在任何标题中创建较小的辅助文本:
Bootstrap 5 样式<mark>
和.mark
具有黄色背景颜色和一些填充:
Bootstrap 5 将设置 HTML 样式<abbr>
底部带有虚线边框且悬停时带有问号的光标的元素:
添加.blockquote
类到一个<blockquote>
当引用其他来源的内容块时。在命名源时,例如 "from WWF's website",请使用.blockquote-footer
类:
Bootstrap 5 将设置 HTML 样式<dl>
元素的方式如下:
Bootstrap 5 将设置 HTML 样式<code>
元素的方式如下:
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) |
尝试一下 |
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!