Bootstrap 5 文字排版
Bootstrap 5 默认设置
Bootstrap 5 默认的 font-size 为 16px,line-height 为 1.5。
Bootstrap 5 默认的 font-family 为 "Helvetica Neue",Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素
margin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> - <h6>
Bootstrap 5 中定义了所有的 HTML 标题 (<h1> 到
<h6>) 的样式。请看下面的实例.
你也可以使用 .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>
亲自试一试 »
Display 标题类
Bootstrap 还提供了六个 Display 类来控制标题的样式: .display-1 to .display-6:
<small>
在 Bootstrap 5 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
<mark>
Bootstrap 5 定义 <mark> 标签及 .mark 类为黄色背景及有一定的内边距:
<abbr>
Bootstrap 5 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类:
<dl>
Bootstrap 5 定义 HTML <dl> 元素的样式如下:
<code>
Bootstrap 5 定义 HTML <code> 元素的样式如下:
<kbd>
Bootstrap 5 定义 HTML <kbd> 元素的样式如下:
<pre>
Bootstrap 5 定义 HTML <pre> 元素的样式如下:
更多排版类
下表提供了 Bootstrap5 更多排版类的实例:
| 类名 | 描述 | 实例 |
|---|---|---|
.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 |
将所有列表项放置同一行 | 测试一下 |
