Bootstrap 简明教程
Bootstrap - Typography
本章将讨论 Bootstrap 提供的各种与版式相关的功能。版式是指使书面文字在显示时看起来清晰、有吸引力且赏心悦目的艺术。
This chapter, will discuss about the various typography related features provided by Bootstrap. Typography is the art of making the written matter look legible, attractive and appealing when displayed.
Bootstrap Default / Global Settings
Bootstrap 的最新版本设置了显示、版式和链接样式的默认设置。以下是其中一些默认设置：
The latest version of Bootstrap sets the default settings for display, typography and link styles. Following are some of the default settings:
-
Bootstrap sets a default font-size of 1rem, 16px by default.
-
Bootstrap sets the line-height as 1.5
-
For optimum text rendering on every device and OS through font-family, use the "Native Font Stack".
-
The $body-bg variable should be used to set a background-color on the <body> tag, where #fff is by default.
-
The global link color can be set using the variable $link-color and apply link underlines only on :hover.
-
To apply the typographic base to the <body> tag, use the attributes such as $font-family-base, $font-size-base, and $line-height-base.
必须在 rem 中设置 $font-size-base 。全局变量在 _variables.scss 中定义，而样式则在 _reboot.scss 中定义。
One must set the $font-size-base in rem. The global variables are defined in _variables.scss and the styles within _reboot.scss.
Headings
HTML 标题标记，即 <h1> 至 <h6> ，在 Bootstrap 中以以下方式设置样式：
The HTML heading tags i.e. <h1> to <h6> are styled in bootstrap in the following way:
Example
可以通过 Edit & Run 选项编辑并试着运行此代码。
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Headings </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1>Heading 1 - h1</h1>
<h2>Heading 2 - h2</h2>
<h3>Heading 3 - h3</h3>
<h4>Heading 4 - h4</h4>
<h5>Heading 5 - h5</h5>
<h6>Heading 6 - h6</h6>
</body>
</html>.h1 至 .h6 类也在 Bootstrap 中可用，以便匹配标题字体样式，而无需使用关联的 HTML 元素。
The classes .h1 to .h6 are also available in bootstrap, to match the font styling of a heading without using the associated HTML element.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Headings Classes </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p class="h1">Class h1 - Heading 1</p>
<p class="h2">Class h2 - Heading 2</p>
<p class="h3">Class h3 - Heading 3</p>
<p class="h4">Class h4 - Heading 4</p>
<p class="h5">Class h5 - Heading 5</p>
<p class="h6">Class h6 - Heading 6</p>
</body>
</html>Customizing Headings
Bootstrap 提供的实用程序类可用于自定标题。
The utility classes provided by bootstrap can be used to customize the headings.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Customizing Headings </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>This is an example to show the customized heading.</p>
<h4>
Here the text will
<small class="text-muted"> be customized through this class.</small>
</h4>
</body>
</html>Display Headings
当标题需要以更大且自由的样式显示时，可以使用显示标题类。
When the headings are to be displayed in a larger and opinionated style, then the display heading classes can be used.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Display Headings </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p class="display-1">Display 1 - Heading 1</p>
<p class="display-2">Display 2 - Heading 2</p>
<p class="display-3">Display 3 - Heading 3</p>
<p class="display-4">Display 4 - Heading 4</p>
<p class="display-5">Display 5 - Heading 5</p>
<p class="display-6">Display 6 - Heading 6</p>
</body>
</html>Lead
.lead 类使段落脱颖而出。它为段落中的文本提供了更大的字体大小、更细粗细和更高的行高。
The class .lead makes the paragraph stand out. It gives a larger font size, lighter weight, and a taller line height to the text in a paragraph.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Lead </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p class="lead">
The class lead will make the paragraph look different from the regular paragraph. It looks “stand-out”.
</p>
</body>
</html>Abbreviations
Bootstrap 设定 HTML 的 <abbr> 元素样式，缩写和首字母缩写词的完整形式在鼠标悬停时显示，并且文本在文本底部显示带点虚线。
The <abbr> element of HTML is styled by bootstrap where the fullform of the abbreviations and the acronyms is shown on hover and the text is displayed with a light dotted line at the bottom of the text.
对缩写使用 .initialism 类，以便获得略小花号的字体。
Use .initialism class to an abbreviation, in order to get a slightly smaller font size.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Abbreviations </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p><abbr title="Indian Space Research Organisation">ISRO</abbr></p>
<p><abbr title="World Health Organisation" class="initialism">WHO</abbr></p>
</body>
</html>Blockquote
当需要将内容块作为引用添加到文档中时，将在 <blockquote> html 元素周围使用类 .blockquote 。例子如下：
When a block of content needs to be added in a document as a quote, class .blockquote is used around the <blockquote> html element. Here is an example:
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Blockquote </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Example for blockquote</h4>
<p>Refer the quote given below.</p>
<blockquote class="blockquote">
<p>An ounce of patience is worth more than a tonne of preaching</p>
</blockquote>
</body>
</html>Naming a Source
Bootstrap 在 <footer> 元素内提供 .blockquote-footer 类以标识来源。 <cite> 标记用于包装源的名称。
Bootstrap provides a class .blockquote-footer inside the <footer> element for identifying the source. <cite> tag is used to wrap the name of the source work.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Naming Source </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Example for Naming a Source</h4>
<p>Refer the quote given below.</p>
<blockquote class="blockquote">
<p>An ounce of patience is worth more than a tonne of preaching</p>
<footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer>
</blockquote>
</body>
</html>Alignment
Bootstrap 提供了类来更改引用块的对齐方式，例如 .text-center 和 .text-right 。
Bootstrap provides classes to change the alignment of the blockquote, such as .text-center and .text-right.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography - Blockquote Alignment </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Example for alignment of blockquote</h4>
<p>Refer the quote given below.</p>
<blockquote class="blockquote text-center">
<p>An ounce of patience is worth more than a tonne of preaching</p>
<footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer>
</blockquote>
</body>
</html>Inline Text Elements
Bootstrap 提供了可用于为文本设置样式的类，而不是使用常见的内联 HTML5 元素。请遵循以下示例：
Instead of using the common inline HTML5 elements, bootstrap provides the classes that can be used for styling of the text. Follow some of the examples given below:
-
.mark
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of mark </h4>
<p>Demonstrating use of mark tag to <mark> highlight </mark> text.</p>
<p class="mark">Demonstrating use of mark class to highlight text.</p>
</body>
</html>-
.small
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of small</h4>
<p>Demonstrating use of <small> tag to make the text look fineprint.</p>
<p class="small">Demonstrating use of small class to make the text look fineprint.</p>
</body>
</html>-
.text-decoration-underline
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of .text-decoration-underline</h4>
<p>Demonstrating use of <u> tag to make the text underlined.</p>
<p class="text-decoration-underline">Demonstrating use of text-decoration-underline class to make the text underlined.</p>
</body>
</html>-
.text-decoration-line-through
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of .text-decoration-line-through</h4>
<p>Demonstrating use of s tag to treat the text as no longer accurate.</p>
<p class="text-decoration-line-through">Demonstrating use of text-decoration-line-through class to treat the text as no longer accurate.</p>
</body>
</html>-
<del>
Example
可以通过 Edit & Run 选项编辑并试着运行此代码。
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of <del> element</h4>
<p><del>Demonstrating use of <del> tag to render the text as deleted.</del></p>
</body>
</html>-
<strong>
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of strong element</h4>
<p><strong>Demonstrating use of strong tag to render the text as bold.</strong></p>
</body>
</html>-
<em>
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Inline Elements</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of em element</h4>
<p><em>Demonstrating use of em tag to render the text as italicized.</em></p>
</body>
</html>Lists
Unstyled
.list-unstyled 类删除了列表的默认样式和列表项的左外边距。然而，此样式仅适用于直接子元素。
The class .list-unstyled removes the default style of list and the left margin on the items of the list. However, this style only applies to the immediate child elements.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of .list-unstyled</h4>
<p>The class .list-unstyled removes the default style of list and the left margin on the items of the list.</p>
<ul class="list-unstyled">
<li>Snacks</li>
<li>Beverages
<ul class="list">
<li>Cold Beverage</li>
<li>Hot Beverage</li>
</ul>
</li>
</ul>
</body>
</html>Inline
Bootstrap 提供了 .list-inline 和 .list-inline-item 这两个类的组合，它可以移除列表的项目符号，并在列出的项目之间添加一些边距或空格。
Bootstrap provides a combination of two classes, .list-inline and .list-inline-item, that removes a list’s bullets and adds some margin or space in between the listed items.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Lists</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of .list-inline and .list-inline-item</h4>
<p>The classes <b>.list-inline</b> and <b>.list-inline-item</b> removes a list's bullets and adds a little margin.</p>
<ul class="list-inline">
<li class="list-inline-item">Tea</li>
<li class="list-inline-item">Coffee</li>
<li class="list-inline-item">Juice</li>
</ul>
</body>
</html>Description List Alignment
Bootstrap 提供了预定义的类来添加到 HTML 的 <dl> 、 <dt> 和 <dd> 标签，以便水平对齐术语和描述。您还可以选择添加 .text-truncate 类来用省略号截断文本。
Bootstrap provides predefined classes to be added to the <dl>, <dt>, and <dd> tags of HTML to align terms and descriptions horizontally. One can optionally add the class .text-truncate to truncate the text with an ellipsis.
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Typography Description List Alignment</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Use of classes for description list alignment</h4>
<p>The predefined classes of bootstrap help to align terms and description in grid form.</p>
<dl class="row">
<dt class="col-sm-3">Description Lists</dt>
<dd class="col-sm-9">This tag shows the description of the term</dd>
<dt class="col-sm-3 text-truncate">The predefined class text-truncate truncates the text and returns the output with ellipsis.</dt>
<dd class="col-sm-9">This tag shows the truncated text with ellipsis</dd>
</dl>
</body>
</html>Responsive Font Sizes
默认情况下，Bootstrap 5 中启用响应字体大小，允许文本在所有设备和视口大小上自动缩放。它缩写为 RFS ，并且能够使用像 margin, padding, border-radius, 甚至 box-shadow 这样的单位值重新缩放文本。
Responsive font sizes are enabled in bootstrap 5 by default, allowing the text to scale automatically across all the devices and viewport sizes. It is abbreviated as RFS and is capable of rescaling the text with unit values like margin, padding, border-radius, or even box-shadow.
RFS 根据浏览器视口尺寸自动计算适当的值。
The RFS automatically calculates the appropriate values as per the dimensions of the browser viewport.