版式

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。
为了创建更具包容性和可访问性的字号，我们使用浏览器的默认根 font-size（通常为16px），这样访问者可以根据需要自定义他们的浏览器默认设置。
将 $font-family-base、$font-size-base 和 $line-height-base 属性作为我们的排版基础应用于 <body>。
通过 $link-color 设置全局链接颜色。
使用 $body-bg 在 <body> 上设置 background-color（默认为 #fff）。

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

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

.h1 到 .h6 类也可用，当你想匹配标题的字体样式但不能使用相关的 HTML 元素时。

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:

<mark> 表示用于参考或标注目的而被标记或高亮的文本。
<small> 表示旁注和小字内容，例如版权和法律文本。
<s> 表示不再相关或不再准确的元素。
<u>表示一段内联文本，应以一种显示其具有非文本注释的方式渲染。

如果你想设置文本样式，则应该使用以下类：

🌐 If you want to style your text, you should use the following classes instead:

.mark 将应用与 <mark> 相同的样式。
.small 将应用与 <small> 相同的样式。
.text-decoration-underline 将应用与 <u> 相同的样式。
.text-decoration-line-through 将应用与 <s> 相同的样式。

虽然上面没有展示，但可以在 HTML5 中自由使用 <b> 和 <i>。<b> 用于高亮单词或短语，而不传达额外的重要性，而 <i> 主要用于语音、专业术语等。

🌐 While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance, while <i> 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> 之外。在提供出处时，将你的 <blockquote> 封装在 <figure> 中，并使用 <figcaption> 或块级元素（例如 <p>）并带有 .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., <p>) 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

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

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

此处以及在 Reboot 中涉及的其他排版元素也有专用变量。

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

// scss-docs-start vr-variables
$vr-border-width:             var(--#{$prefix}border-width);
// scss-docs-end vr-variables

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