Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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-1.display-2.display-3.display-4

示例

显示 1

显示 2

显示 3

显示 4

亲自尝试 »

<small>

在 Bootstrap 4 中,HTML <small> 元素用于在任何标题中创建更轻的次要文本

示例

h1 标题 次要文本

h2 标题 次要文本

h3 标题 次要文本

h4 标题 次要文本

h5 标题 次要文本
h6 标题 次要文本
亲自尝试 »


<mark>

Bootstrap 4 将使用黄色背景色和一些填充来设置 HTML <mark> 元素的样式

示例

使用 mark 元素来 突出显示 文本。

亲自尝试 »

<abbr>

Bootstrap 4 将使用带点边框底部来设置 HTML <abbr> 元素的样式

示例

The WHO was founded in 1948.

亲自尝试 »

<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.


From WWF's website
亲自尝试 »

<dl>

Bootstrap 4 将以以下方式设置 HTML <dl> 元素的样式

示例

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

<code>

Bootstrap 4 将以以下方式设置 HTML <code> 元素的样式

示例

The following HTML elements: span, section, and div defines a section in a document.

亲自尝试 »

<kbd>

Bootstrap 4 将以以下方式设置 HTML <kbd> 元素的样式

示例

Use ctrl + p to open the Print dialog box.

亲自尝试 »

<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 类可以添加到 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 所有类参考.


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.