版式

Bootstrap 排版的文档和示例，包括全局设置、标题、正文、列表等。

全局设置

¥Global settings

Bootstrap 设置基本的全局显示、排版和链接样式。当需要更多控制时，请查看文本实用程序类。

¥Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

使用原生字体堆栈，为每个操作系统和设备选择最佳的 font-family。

¥Use a native font stack that selects the best font-family for each OS and device.
为了获得更具包容性和易于访问的字体比例，我们使用浏览器的默认根 font-size（通常为 16px），以便访问者可以根据需要自定义其浏览器默认值。

¥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-family-base、$font-size-base 和 $line-height-base 属性作为应用于 <body> 的排版基础。

¥Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
通过 $link-color 设置全局链接颜色。

¥Set the global link color via $link-color.
使用 $body-bg 在 <body> 上设置 background-color（默认为 #fff）。

¥Use $body-bg to set a background-color on the <body> (#fff by default).

这些样式可以在 _reboot.scss 中找到，全局变量在 _variables.scss 中定义。确保将 $font-size-base 设置为 rem。

¥These styles can be found within _reboot.scss, and the global variables are defined in _variables.scss. Make sure to set $font-size-base in rem.

标题

¥Headings

所有 HTML 标题（<h1> 到 <h6>）均可用。

¥All HTML headings, <h1> through <h6>, are available.

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>

当你想要匹配标题的字体样式但无法使用关联的 HTML 元素时，还可以使用 .h1 到 .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. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

html

<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

使用包含的工具类从 Bootstrap 3 重新创建小辅助标题文本。

¥Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

Fancy display heading With faded secondary text

html

<h3>
  Fancy display heading
  <small class="text-body-secondary">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-font-sizes Sass 映射和两个变量 $display-font-weight 和 $display-line-height 配置的。

¥Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.

显示标题可通过两个变量 $display-font-family 和 $display-font-style 进行自定义。

¥Display headings are customizable via two variables, $display-font-family and $display-font-style.

scss/_variables.scss

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

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

带领

¥Lead

通过添加 .lead 使段落脱颖而出。

¥Make a paragraph stand out by adding .lead.

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

html

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

内嵌文本元素

¥Inline text elements

常见内联 HTML5 元素的样式。

¥Styling for common inline HTML5 elements.

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.

html

<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:

 表示出于参考或符号目的而标记或高亮的文本。

¥ represents text which is marked or highlighted for reference or notation purposes.
 代表旁注和小字，例如版权和法律文本。

¥ represents side-comments and small print, like copyright and legal text.
<s> 代表不再相关或不再准确的元素。

¥<s> represents element that are no longer relevant or no longer accurate.
 表示一段内联文本，应以指示其具有非文本注释的方式渲染。

¥ 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 将应用与  相同的样式。

¥.mark will apply the same styles as .
.small 将应用与  相同的样式。

¥.small will apply the same styles as .
.text-decoration-underline 将应用与  相同的样式。

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

¥.text-decoration-line-through will apply the same styles as <s>.

虽然上面没有显示，但请随意在 HTML5 中使用  和 。 旨在高亮单词或短语，但不传达额外的重要性，而  主要用于语音、技术术语等。

¥While not shown above, feel free to use  and  in HTML5.  is meant to highlight words or phrases without conveying additional importance, while  is mostly for voice, technical terms, etc.

文本工具

¥Text utilities

使用我们的文本实用程序和颜色实用程序更改文本对齐方式、变换、样式、粗细、行高、装饰和颜色。

¥Change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities.

缩写

¥Abbreviations

HTML 的 <abbr> 元素的风格化实现，用于缩写和首字母缩略词，以在悬停时显示扩展版本。缩写有默认下划线并获得帮助光标，以便在悬停时向辅助技术的用户提供额外的上下文。

¥Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

将 .initialism 添加到缩写中以获得稍小的字体大小。

¥Add .initialism to an abbreviation for a slightly smaller font-size.

attr

HTML

html

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

块引用

¥Blockquotes

用于在文档中引用其他来源的内容块。将 <blockquote class="blockquote"> 封装在任何 HTML 中作为引用。

¥For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

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

html

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

命名来源

¥Naming a source

HTML 规范要求将块引用属性放置在 <blockquote> 之外。提供归因时，请将 <blockquote> 封装在 <figure> 中，并使用 <figcaption> 或块级元素（例如 ）与 .blockquote-footer 类。请务必将源作品的名称也包含在 <cite> 中。

¥The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., ) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.

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

html

<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.

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

html

<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.

html

<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

删除列表项上的默认 list-style 和左边距（仅限直接子项）。这仅适用于直接子列表项，这意味着你还需要为任何嵌套列表添加类。

¥Remove the default list-style and left margin on list items (immediate children only). 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.

html

<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

删除列表的项目符号并应用一些轻 margin 与两个类 .list-inline 和 .list-inline-item 的组合。

¥Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

This is a list item.
And another one.
But they're displayed inline.

html

<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

通过使用网格系统的预定义类（或语义混合）水平对齐术语和描述。对于较长的术语，你可以选择添加 .text-truncate 类以使用省略号截断文本。

¥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.

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.

html

<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

在 Bootstrap 5 中，我们默认启用了响应式字体大小，允许文本在设备和视口大小之间更自然地缩放。请查看 RFS 页面以了解其工作原理。

¥In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.

CSS

Sass 变量

¥Sass variables

标题有一些用于调整大小和间距的专用变量。

¥Headings have some dedicated variables for sizing and spacing.

scss/_variables.scss

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

此处和重启中介绍的各种排版元素也有专用变量。

¥Miscellaneous typography elements covered here and in Reboot also have dedicated variables.

scss/_variables.scss

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

// fusv-disable
$text-muted:                  var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable

$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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             var(--#{$prefix}border-width);
$hr-opacity:                  .25;

$vr-border-width:             var(--#{$prefix}border-width);

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-color:                  $body-color;
$mark-bg:                     $yellow-100;

Sass 混入

¥Sass mixins

没有专门用于排版的 mixin，但 Bootstrap 确实使用响应式字体大小调整 (RFS)。

¥There are no dedicated mixins for typography, but Bootstrap does use Responsive Font Sizing (RFS).