Typography排版

~~Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.~~Bootstrap排版的文档和示例，包括全局设置、标题、正文、列表等。

~~On this page~~本页内容

Global settings全局设置

~~Bootstrap sets basic global display, typography, and link styles.~~ Bootstrap设置基本的全局显示、排版和链接样式。~~When more control is needed, check out the textual utility classes.~~当需要更多控制时，请查看文本实用程序类。

~~Use a native font stack that selects the best font-family for each OS and device.~~使用原生字体堆栈，为每个操作系统和设备选择最佳字体系列。
~~For a more inclusive and accessible type scale, we use the browser’s default root font-size (typically 16px) so visitors can customize their browser defaults as needed.~~为了更具包容性和可访问性，我们使用浏览器的默认根font-size（通常为16px），以便访问者可以根据需要自定义其浏览器默认值。
~~Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.~~使用$font-family-base、$font-size-base和$line-height-base属性作为应用于<body>的排版基础。
~~Set the global link color via $link-color.~~通过$link-color设置全局链接颜色。
~~Use $body-bg to set a background-color on the <body> (#fff by default).~~使用$body-bg在<body>上设置background-color（默认为#fff）。

~~These styles can be found within _reboot.scss, and the global variables are defined in _variables.scss.~~ 这些样式可以在_reboot.scss中找到，全局变量在_variables.scss中定义。~~Make sure to set $font-size-base in rem.~~确保在rem中设置$font-size-base。

Headings标题

~~All HTML headings, <h1> through <h6>, are available.~~所有HTML标题，<h1>到<h6>都可用。

Heading	Example
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

~~.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.~~.h1到.h6类也可用于当您希望匹配标题的字体样式但无法使用关联的HTML元素时。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Customizing headings自定义标题

~~Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.~~使用附带的实用程序类从Bootstrap 3重新创建小的辅助标题文本。

Fancy display heading With faded secondary text

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

Display headings显示标题

~~Traditional heading elements are designed to work best in the meat of your page content.~~ 传统的标题元素被设计为在页面内容的核心部分发挥最佳作用。~~When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.~~当您需要一个标题突出时，考虑使用显示标题——一个更大的、稍微有点自以为是的标题样式。

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

~~Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.~~显示标题通过Sass映射$display-font-sizes和两个变量$display-font-weight和$display-line-height进行配置。

$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead前导

~~Make a paragraph stand out by adding .lead.~~通过添加.lead使段落突出。

This is a lead paragraph. It stands out from regular paragraphs.

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline text elements内联文本元素

~~Styling for common inline HTML5 elements.~~通用内嵌HTML5元素的样式。

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

~~Beware that those tags should be used for semantic purpose:~~请注意，这些标记应用于语义目的：

<mark> ~~represents text which is marked or highlighted for reference or notation purposes.~~表示标记或突出显示的文本，以供参考或标记。
<small> ~~represents side-comments and small print, like copyright and legal text.~~代表旁注和小字体，如版权和法律文本。
<s> ~~represents element that are no longer relevant or no longer accurate.~~表示不再相关或不再准确的元素。
<u> ~~represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.~~表示内联文本的范围，该范围应以指示其具有非文本注释的方式呈现。

~~If you want to style your text, you should use the following classes instead:~~如果要设置文本样式，应使用以下类：

.mark ~~will apply the same styles as <mark>.~~将应用与<mark>相同的样式。
.small ~~will apply the same styles as <small>.~~将应用与<small>相同的样式。
.text-decoration-underline ~~will apply the same styles as <u>.~~将应用与<u>相同的样式。
.text-decoration-line-through ~~will apply the same styles as <s>.~~将应用与<s>相同的样式。

~~While not shown above, feel free to use <b> and <i> in HTML5.~~ 虽然上面没有显示，但请随意使用<b>及<i>在HTML5中。~~<b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.~~<b>用于突出显示单词或短语而不传达额外的重要性，而<i>主要用于语音、技术术语等。

Text utilities文本实用程序

~~Change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities.~~使用文本实用程序和着色实用程序来改变文本对齐方式、换形、样式、磅重、行高、装饰以及着色。

Abbreviations缩写

~~Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover.~~ HTML的样式化实现<abbr>元素的缩写和首字母缩略词，以在悬停时显示扩展版本。~~Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.~~缩略语有一个默认下划线，并获得一个帮助光标，以便在悬停时为辅助技术的用户提供额外的上下文。

~~Add .initialism to an abbreviation for a slightly smaller font-size.~~将.initialism添加到略小字体的缩写中。

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes块引用

~~For quoting blocks of content from another source within your document.~~ 用于引用文档中其他来源的内容块。~~Wrap <blockquote class="blockquote"> around any HTML as the quote.~~围绕任意HTML包装<blockquote class="blockquote">，作为引用。

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Naming a source署名来源

~~The HTML spec requires that blockquote attribution be placed outside the <blockquote>. W~~HTML规范要求将块引用归属置于<blockquote>外面。~~When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class.~~ 当提供归属时，请将<blockquote>包装在一个<figure>中，使用带有.blockquote-footer类的<figcaption>或某个块级元素（例如<p>）~~Be sure to wrap the name of the source work in <cite> as well.~~确保将源工作的名称也包装在<cite>中。

A well-known quote, contained in a blockquote element.

<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

Alignment对齐方式

~~Use text utilities as needed to change the alignment of your blockquote.~~根据需要使用文本实用程序更改blockquote的对齐方式。

A well-known quote, contained in a blockquote element.

<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

A well-known quote, contained in a blockquote element.

<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

Lists列表

Unstyled未样式化

~~Remove the default list-style and left margin on list items (immediate children only).~~ 删除列表项上的默认list-style和左边距（仅限直接子项）。This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.这仅适用于直接子列表项，这意味着您还需要为任何嵌套列表添加类。

~~This is a list.~~这是一份列表。
~~It appears completely unstyled.~~它看起来完全没有样式。
~~Structurally, it's still a list.~~从结构上看，它仍然是一个列表。
~~However, this style only applies to immediate child elements.~~但是，此样式仅适用于直接子元素。
~~Nested lists:~~嵌套列表：
- ~~are unaffected by this style~~不受这种样式的影响
- ~~will still show a bullet~~仍将显示项目符号
- ~~and have appropriate left margin~~并有适当的左边缘
~~This may still come in handy in some situations.~~在某些情况下，这可能仍然有用。

<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>

Inline内联

~~Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.~~删除列表的项目符号，并结合使用两个类.list-inline和.list-inline-item应用一些轻margin。

~~This is a list item.~~这是一个列表项。
~~And another one.~~还有一个列表项。
~~But they're displayed inline.~~但它们是内联显示的。

<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>

Description list alignment描述列表对齐

~~Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins).~~ 通过使用网格系统的预定义类（或语义混合）水平对齐术语和描述。~~For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.~~对于较长的术语，您可以选择添加.text-truncate类来截断带有省略号的文本。

~~Description lists~~描述列表

~~A description list is perfect for defining terms.~~描述列表非常适合定义术语。

~~Term~~术语

~~Definition for the term.~~该术语的定义。

~~And some more placeholder definition text.~~还有一些占位符定义文本。

~~Another term~~另一个术语

~~This definition is short, so no extra paragraphs or anything.~~这个定义很短，所以没有额外的段落或任何东西。

~~Truncated term is truncated~~截断项被截断

~~This can be useful when space is tight.~~ 这在空间紧张时非常有用。~~Adds an ellipsis at the end.~~在末尾添加省略号。

~~Nesting~~嵌套

~~Nested definition list~~嵌套定义列表: ~~I heard you like definition lists.~~ 我听说你喜欢定义列表。~~Let me put a definition list inside your definition list.~~让我在你的定义列表里放一个定义列表。

<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>

Responsive font sizes响应字体大小

~~In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes.~~ 在Bootstrap5中，我们默认启用了响应字体大小，允许文本在设备和视口大小之间更自然地缩放。~~Have a look at the RFS page to find out how this works.~~请查看RFS页面，了解其工作原理。

Sass

Variables变量

~~Headings have some dedicated variables for sizing and spacing.~~标题有一些用于调整大小和间距的专用变量。

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

~~Miscellaneous typography elements covered here and in Reboot also have dedicated variables.~~这里和重启动中涉及的其他排版元素也有专用变量。

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;
$small-font-size:             .875em;
$sub-sup-font-size:           .75em;
$text-muted:                  $gray-600;
$initialism-font-size:        $small-font-size;
$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y:                 $spacer;
$hr-color:                    inherit;
$hr-height:                   $border-width;
$hr-opacity:                  .25;
$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;
$mark-padding:                .2em;
$dt-font-weight:              $font-weight-bold;
$nested-kbd-font-weight:      $font-weight-bold;
$list-inline-padding:         .5rem;
$mark-bg:                     #fcf8e3;

Mixins杂合体

~~There are no dedicated mixins for typography, but Bootstrap does use Responsive Font Sizing (RFS).~~没有专门用于排版的杂合体，但Bootstrap确实使用响应式字体大小（RFS）。