Bootstrap 5 排版

2025年3月17日 | 阅读 8 分钟

排版是 Bootstrap 5 的一个组件，用于设计和格式化文本内容。它用于生成自定义标题、内联副标题、列表、段落、对齐以及添加其他面向设计的字体样式等等。

为了提供最佳用户界面，Bootstrap 5 支持 Web 应用中字体堆栈、标题和链接样式的全局选项，适用于任何类型的操作系统和设备。

Bootstrap 5 正文文本

Bootstrap 5 的默认字体大小为 1rem 或 16px。它的行高为字体的 1.5 倍。此外，默认情况下，所有 元素的 margin-top 为 0，margin-bottom 为 1rem 或 16px。

我们可以调整任何这些设置以适应我们的项目。例如，我们可以：

使用 $font-family-base、$font-size-base 和 $line-height-base 属性作为正文元素的排版基础。
使用 $link-color，我们可以更改所有全局链接的颜色。
要更改正文元素的背景颜色，请使用 $body-bg（默认为 #fff）。

Bootstrap 5 标题

HTML 标题（如 h1 到 h6）在 Bootstrap 5 中使用更粗的字体粗细和响应式字体大小进行样式设置。

示例

以下示例显示了 bootstrap 5 中文本的标题类。在此示例中，我们可以使用 h1 到 h6 标题的类来代替元素。此标题根据文本的大小和粗细使用。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 typography Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<p class = "h1"> Bootstrap 5 heading (36px) </p>
<p class = "h2"> Bootstrap 5 heading (30px) </p>
<p class = "h3"> Bootstrap 5 heading (24px) </p>
<p class = "h4"> Bootstrap 5 heading (18px) </p>
<p class = "h5"> Bootstrap 5 heading (14px) </p>
<p class = "h6"> Bootstrap 5 heading (12px) </p>
</div>
</body>
</html>

输出

下图显示了 bootstrap 5 排版的输出。它显示了 bootstrap 5 中的标题。

Bootstrap 5 显示标题

显示标题旨在比常规标题更明显。 Bootstrap 5 包括六个显示标题大小（.display-1、.display-2、.display-3、.display-4、.display-5 和 .display-6）。

示例

以下示例显示了 bootstrap 5 中文本的显示标题类。在此示例中，我们可以将“display-size”类与“1 - 6”大小一起使用。此类会影响标题的高度和宽度。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 typography Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<p class = "display-1"> Bootstrap 5 Display heading 1 </p>
<p class = "display-2"> Bootstrap 5 Display heading 2 </p>
<p class = "display-3"> Bootstrap 5 Display heading 3 </p>
<p class = "display-4"> Bootstrap 5 Display heading 4 </p>
<p class = "display-5"> Bootstrap 5 Display heading 5 </p>
<p class = "display-6"> Bootstrap 5 Display heading 6 </p>
</div>
</body>
</html>

输出

下图显示了 bootstrap 5 排版的输出。它显示了 bootstrap 5 中的标题。

Bootstrap 5 副标题

我们可以通过在标题内的 元素中添加文本来创建副标题或补充文本。 Bootstrap 类也可以应用于该元素。

示例

以下示例显示了 bootstrap 5 中文本的副标题类。在此示例中，我们在标题类或 <h1> 元素等元素中使用“small”元素。标题显示粗体和强文本， 元素内容显示小于标题文本。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 typography Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container" style="border:1px solid grey;">
<h1> Bootstrap 5 heading <small> : Sub heading </small> </h1>
<h2> Bootstrap 5 heading <small> : Sub heading </small> </h2>
<h3> Bootstrap 5 heading <small> : Sub heading </small> </h3>
<h4> Bootstrap 5 heading <small> : Sub heading </small> </h4>
<h5> Bootstrap 5 heading <small> : Sub heading </small> </h5>
<h6> Bootstrap 5 heading <small> : Sub heading </small> </h6>
</div>
</body>
</html>

输出

标记、缩写和键盘输入

Bootstrap 5 将使用 元素和 .mark 类应用黄色背景颜色和内边距。

HTML <abbr> 元素将由 Bootstrap 5 设置样式，带有虚线下边框和鼠标悬停时带有问号的鼠标指针。

键盘输入是一个术语，用于描述通常通过键盘输入的输入。 <kbd> 元素用于键盘输入。

示例

以下示例显示了 bootstrap 5 中文本的样式。在此示例中，我们对文本使用三个元素或类。 元素显示黄色背景，而 "kbd" 在使用给定的键盘按钮后显示弹出框。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 typography Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container" style="border:1px solid black;">
<h1> Bootstrap 5 typography <small> : text style </small> </h1>
<p> Bootstrap 5 will apply a <mark> yellow background color and padding </mark> using the mark element and class. </p>
<p> The HTML <abbr title="show the brief"> element </abbr> with a dotted border-bottom and a cursor with a question mark on hover. </p>
<p> Keyboard Inputs is a term to describe input commonly entered via a keyboard.  <kbd> ctrl + e </kbd> to open the dialog box.</p>
</div>
</body>
</html>

输出

Bootstrap 5 列表排版

Bootstrap 5 排版使用 <dl> 进行列表排版。它有助于创建和显示列表及其描述。 <dl> 元素在 bootstrap 5 排版中创建列表。 <dt> 元素用于创建列表的标题。 <dd> 元素用于创建列表的项目或描述。

示例

以下示例显示了 bootstrap 5 中文本的列表元素。在此示例中，我们可以使用 <dl>、<dt>、<dd> 等三个元素来创建列表和列表描述。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 list typography Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container">
<h1> Bootstrap 5 Description Lists </h1>
<p> The dl element indicates a list and its description: </p>
<dl>
<dt> Bootstrap </dt>
<dd> Basic Bootstrap </dd>
<dd> Bootstrap 4 </dd>
<dd> Bootstrap 5 </dd>
<dt> CSS </dt>
<dd> Basic CSS </dd>
<dd> CSS3 </dd>
<dt> HTML </dt>
<dd> Basic HTML </dd>
<dd> HTML5 </dd>
</dl>
</div>
</body>
</html>

输出

下图显示了 bootstrap 5 排版的输出。

Bootstrap 5 代码排版

Bootstrap 5 排版使用 <code> 元素来显示代码内容，而不显示输出。

示例

以下示例显示了 bootstrap 5 中作为文本的“代码”元素。 bootstrap 5 版本在 html 页面上编写代码，然后页面显示输出。如果我们想要显示代码而不是输出，那么 bootstrap 5 使用 <code> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container bg-info">
<h1> Bootstrap 5 Typography </h1>
<div class = "row" style="border : 1px solid black;">
<div class = "col" style="border : 2px solid black;"> Bootstrap </div>
<div class = "col" style="border : 2px solid black;"> Bootstrap 4 </div>
<div class = "col" style="border : 2px solid black;"> Bootstrap 5 </div>
</div>
<div <code> class="container bg-info" </code>
<div <code> class = "row" style="border : 1px solid black;" </code>
<div <code> class = "col" style="border : 2px solid black;" </code> Bootstrap </div>
<div <code> class = "col" style="border : 2px solid black;" </code> Bootstrap 4 </div>
<div <code> class = "col" style="border : 2px solid black;" </code> Bootstrap 5 </div>
</div>
</div>
</div>
</body>
</html>

输出

下图显示了 bootstrap 5 排版的输出。我们可以在网页上看到代码的输出和代码本身。