菜单
×
   ❮   
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 5 文本/排版


Bootstrap 5 默认设置

Bootstrap 5 使用默认的 font-size 为 1rem(默认 16px),其 line-height 为 1.5。

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


<h1> - <h6>

Bootstrap 5 为 HTML 标题(<h1><h6>)设置了更粗的 font-weight 和响应式的 font-size

如果您愿意,您也可以在其他元素上使用 .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>
自己动手试一试 »

显示标题

显示标题比普通标题更醒目(更大的 font-size 和更浅的 font-weight),有六个类可供选择:.display-1.display-6

示例

显示 1

显示 2

显示 3

显示 4

显示 5

显示 6

自己动手试一试 »

<small>

在 Bootstrap 5 中,HTML <small> 元素(和 .small 类)用于在任何标题中创建更小、次要的文本。


<mark>

Bootstrap 5 会为 <mark>.mark 设置黄色背景色和一些内边距。

示例

使用 mark 元素来高亮文本。

自己动手试一试 »


<abbr>

Bootstrap 5 会为 HTML <abbr> 元素设置下划线为虚线,并在悬停时显示问号光标。

示例

WHO成立于 1948 年。

自己动手试一试 »

<blockquote>

当引用来自另一个来源的内容块时,请为 <blockquote> 添加 .blockquote 类。当引用来源时,例如“来自 WWF 的网站”,请使用 .blockquote-footer 类。


<dl>

Bootstrap 5 会对 HTML <dl> 元素进行如下样式设置:


<code>

Bootstrap 5 会对 HTML <code> 元素进行如下样式设置:


<kbd>

Bootstrap 5 会对 HTML <kbd> 元素进行如下样式设置:


<pre>

Bootstrap 5 会对 HTML <pre> 元素进行如下样式设置:


更多排版类

下面的 Bootstrap 5 类可以添加到 HTML 元素以进一步样式化:

描述 示例
.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 将所有列表项放在一行上(与每个 <li> 元素的 .list-inline-item 一起使用) 试一试

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持