4.文字/排版
Bootstrap 5 默认设置
Bootstrap 5 默认 font-size 为 1rem（默认为 16px），line-height 为 1.5。
此外，所有 <p> 元素都设置了 margin-top: 0 和 margin-bottom: 1rem （默认为 16px）。
<h1> - <h6>
Bootstrap 5 把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。
实例
如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>每个 Bootstrap 标题的 font-size 取决于屏幕大小。尝试调整浏览器窗口的大小可查看效果。</p>
<h1>h1 Bootstrap 标题</h1>
<h2>h2 Bootstrap 标题</h2>
<h3>h3 Bootstrap 标题</h3>
<h4>h4 Bootstrap 标题</h4>
<h5>h5 Bootstrap 标题</h5>
<h6>h6 Bootstrap 标题</h6>
</div>
</body>
</html>display 标题
display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<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>
</div>
</body>
</html><small>
在 Bootstrap 5 中，HTML <small> 元素（和 .small 类）用于在任何标题中创建较小的辅助文本：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>较小的辅助文本</h1>
<p>small 元素（和 .small 类）用于在任何标题中创建较小的辅助文本：</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div>
</body>
</html><mark>
Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 <mark> 和 .mark 的样式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>突出显示文本</h1>
<p>使用 mark 元素（或 .mark 类）来 <mark>突出显示</mark> 文本。</p>
</div>
</body>
</html><abbr>
Bootstrap 5 将 HTML <abbr> 元素的样式设置为底部带有虚线边框，悬停时带有问号的光标：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>缩写</h1>
<p>abbr 元素用于标记缩写或首字母缩略词：</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
</body>
</html><blockquote>
当引用其他来源的内容块时，请将 .blockquote 类添加到 <blockquote>。当命名来源时，例如“来自世界自然基金会的网站”，请使用 .blockquote-footer 类：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>块引用</h1>
<p>blockquote 元素用于显示来自另一个来源的内容：</p>
<blockquote class="blockquote">
<p>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.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
</body>
</html><dl>
Bootstrap 5 将通过以下方式设置 HTML <dl> 元素的样式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>描述列表</h1>
<p>dl 元素表示描述列表：</p>
<dl>
<dt>咖啡</dt>
<dd>- 黑色的热饮</dd>
<dt>牛奶</dt>
<dd>- 白色的冷饮</dd>
</dl>
</div>
</body>
</html><code>
Bootstrap 5 将通过以下方式设置 HTML <code> 元素的样式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>代码片段</h1>
<p>行内的代码片段应该嵌入到 code 元素中：</p>
<p>这些 HTML 元素：<code>span</code>、<code>section</code> 以及 <code>div</code> 定义文档中的一个部分。</p>
</div>
</body>
</html><kbd>
Bootstrap 5 将通过以下方式设置 HTML <kbd> 元素的样式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>键盘输入</h1>
<p>如需表示通常通过键盘键入的输入内容，请使用 kbd 元素：</p>
<p>请使用 <kbd>ctrl + p</kbd> 打开打印对话框。</p>
</div>
</body>
</html><pre>
Bootstrap 5 将通过以下方式设置 HTML <pre> 元素的样式：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>多行代码行</h1>
<p>对于多行代码，请使用 pre 元素：</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
</body>
</html>更多排版类
下面的 Bootstrap 5 类可以进一步添加到 HTML 元素的样式中：
| 类 | 描述 |
|---|---|
| .lead | 突出段落。 |
| .text-left | 规定左对齐文本。 |
| .text-break | 防止长文本破坏布局。 |
| .text-center | 规定居中对齐的文本。 |
| .text-decoration-none | 删除链接中的下划线。 |
| .text-end | 规定右对齐文本。 |
| .text-nowrap | 规定文本不换行。 |
| .text-lowercase | 规定小写文本。 |
| .text-uppercase | 规定大写文本。 |
| .text-capitalize | 规定大写文本。 |
| .initialism | 以稍小的字体显示 <abbr> 元素内的文本。 |
| .list-unstyled | 删除列表项的默认 list-style 和左外边距（适用于 <ul> 和 <ol>）。 此类仅适用于直接子列表项。 如需从任何嵌套列表中删除默认列表样式，也请将此类应用于嵌套列表。 |
| .list-inline | 将所有列表项放在一行上。 请与每个 <li> 元素上的 .list-inline-item 一起使用。 |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话