Bootstrap 4 文本/排版
Bootstrap 4 默认设置
Bootstrap 4 使用默认的 font-size
为 16px,其 line-height
为 1.5。
默认的 font-family
为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外,所有 <p>
元素都有 margin-top: 0
和 margin-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-1
,.display-2
,.display-3
,.display-4
<small>
在 Bootstrap 4 中,HTML <small>
元素用于在任何标题中创建更轻的次要文本
<mark>
Bootstrap 4 将使用黄色背景色和一些填充来设置 HTML <mark>
元素的样式
<abbr>
Bootstrap 4 将使用带点边框底部来设置 HTML <abbr>
元素的样式
<blockquote>
在引用来自其他来源的内容块时,将 .blockquote
类添加到 <blockquote>
示例
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
Bootstrap 4 将以以下方式设置 HTML <dl>
元素的样式
<code>
Bootstrap 4 将以以下方式设置 HTML <code>
元素的样式
<kbd>
Bootstrap 4 将以以下方式设置 HTML <kbd>
元素的样式
<pre>
Bootstrap 4 将以以下方式设置 HTML <pre>
元素的样式
示例
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
更多排版类
以下 Bootstrap 4 类可以添加到 HTML 元素以进一步设置样式
类 | 描述 | 示例 |
---|---|---|
.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 |
将所有列表项放置在单行上(与每个 <li> 元素上的 .list-inline-item 一起使用) |
尝试 |
.pre-scrollable |
使 <pre> 元素可滚动 |
尝试 |
完整的 Bootstrap 4 CSS 参考
要完整了解 Bootstrap 4 中所有可用 CSS 类的参考,请访问我们的 Bootstrap 4 所有类参考.