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: 0margin-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:

实例

显示 1

显示 2

显示 3

显示 4

显示 5

显示 6

亲自试一试 »

<small>

在 Bootstrap 5 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:


<mark>

Bootstrap 5 定义 <mark> 标签及 .mark 类为黄色背景及有一定的内边距:

实例

使用标记元素highlight高亮文本。

亲自试一试 »


<abbr>

Bootstrap 5 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:

实例

WHO成立于1948年。

亲自试一试 »

<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 将所有列表项放置同一行 测试一下