Bootstrap 4 文字排版

Bootstrap 4 默认设置

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif.

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


<h1> - <h6>

Bootstrap 4 中定义了所有的 HTML 标题 (<h1><h6>) 的样式的,字体设置为粗体。请看下面的实例:

实例

h1 Bootstrap 标题 (2.5rem = 40px)

h2 Bootstrap 标题 (2rem = 32px)

h3 Bootstrap 标题 (1.75rem = 28px)

h4 Bootstrap 标题 (1.5rem = 24px)

h5 Bootstrap 标题 (1.25rem = 20px)
h6 Bootstrap 标题 (1rem = 16px)
亲自试一试 »

Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4 ,Display 标题类用于比普通标题(更大的字体大小和更轻的字体重量)更突出

实例

Display 1

Display 2

Display 3

Display 4

亲自试一试 »

<small>

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

实例

h1 标题 次要文字

h2 标题 次要文字

h3 标题 次要文字

h4 标题 次要文字

h5 标题 次要文字
h6 标题 次要文字
亲自试一试 »


<mark>

Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:

实例

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

亲自试一试 »

<abbr>

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

实例

WHO成立于 1948 年。

亲自试一试 »

<blockquote>

对于引用的内容可以在 .blockquote 上添加 <blockquote> 类 :

实例

这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本。


From WWF's website
亲自试一试 »

<dl>

Bootstrap 4 定义 HTML <dl> 元素的样式如下:

实例

Coffee
- black hot drink
Milk
- white cold drink
亲自试一试 »

<code>

Bootstrap 4 定义 HTML <code> 元素的样式如下:

实例

以下 HTML 元素:spansectiondiv 定义了文档中的一个部分。

亲自试一试 »

<kbd>

Bootstrap 4 定义 HTML <kbd> 元素的样式如下:

实例

使用 ctrl + p 打开打印对话框。

亲自试一试 »

<pre>

Bootstrap 4 定义 HTML <pre> 元素的样式如下:

实例

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
亲自试一试 »

更多排版类

下表提供了 Bootstrap 4 更多排版类的实例:

类名 描述 实例
.font-weight-bold 加粗文本 测试一下
.font-weight-bolder 黑体字 测试一下
.font-italic 斜体文本 测试一下
.font-weight-light 更细的文本 测试一下
.font-weight-lighter 较轻的文字 测试一下
.font-weight-normal 普通文本 测试一下
.lead 让段落更突出 测试一下
.small 指定更小文本 (为父元素的 80% ) 测试一下
.text-left 文本左对齐 测试一下
.text-*-left 在小屏幕、中屏幕、大屏幕或大屏幕上指示文本左对齐 测试一下
.text-break 防止长文本破坏布局 测试一下
.text-center 文本居中对齐 测试一下
.text-*-center 在小屏幕、中屏幕、大屏幕或大屏幕上指示文本居中对齐 测试一下
.text-decoration-none 从链接中删除下划线 测试一下
.text-right 文本右对齐 测试一下
.text-*-right 在小屏幕、中屏幕、大屏幕或大屏幕上文本右对齐 测试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 测试一下
.text-monospace 等距文本 测试一下
.text-nowrap 段落中超出屏幕部分不换行 测试一下
.text-lowercase 设定文本小写 测试一下
.text-reset 重置文本或链接的颜色(从其父级继承颜色) 测试一下
.text-uppercase 设定文本大写 测试一下
.text-capitalize 设定单词首字母大写 测试一下
.initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 测试一下
.list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul><ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) 测试一下
.list-inline 将所有列表项放置同一行 测试一下
.pre-scrollable 使 <pre> 元素可滚动 测试一下

完整 Bootstrap 4 CSS 参考

有关 Bootstrap 4 中所有可用 CSS 类的完整参考,请访问我们的 Bootstrap 4 所有类参考