排版 · Bootstrap 6.0 中文文档

全局设置

Bootstrap 设置了基本的全局显示、排版和链接样式。当需要更多控制时，请查看我们的文本工具。

使用一个本地字体堆栈选择最好的 font-family 对于每个操作系统和设备。
为了更具包容性和可访问性的字体等级，我们使用浏览器的默认根字体 font-size （通常为16像素），以便访客根据需要自定义他们的浏览器默认设置。
使用 --body-font-family, --body-font-size，和 --body-line-height 作为我们排版基础应用的属性到 <body>.
通过设置全局链接颜色 --bs-link-color.
使用 --bs-body-bg 设置一个 background-color 在……上 <body> (#fff 默认情况下)。

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

标题

如在 Reboot 中提到的，所有 HTML 标题，从 <h1> 到 <h6>，都可用作元素或类选择器。

标题	示例
`<h1></h1>`	h1. Bootstrap 标题
`<h2></h2>`	h2. Bootstrap 标题
`<h3></h3>`	h3. Bootstrap 标题
`<h4></h4>`	h4. Bootstrap 标题
`<h5></h5>`	h5. Bootstrap 标题
`<h6></h6>`	h6. Bootstrap 标题

HTML

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

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

前往我们的字体大小工具，以获得对 font-size 和 line-height 的更多控制。

全局字体大小

标题的大小是通过我们响应式字体大小根 CSS 变量来设置的。你可以自己使用这些变量，或者与我们的标题类、字体大小工具类和文本大小工具类一起使用（在这里你也会得到一个 line-height）。

在下面的 CSS 部分了解更多关于它们如何工作的内容。

.fs-xs

.fs-sm

.fs-md

.fs-lg

.fs-xl

.fs-2xl

.fs-3xl

.fs-4xl

.fs-5xl

.fs-6xl

HTML

<div class="fs-xs">.fs-xs</div>
<div class="fs-sm">.fs-sm</div>
<div class="fs-md">.fs-md</div>
<div class="fs-lg">.fs-lg</div>
<div class="fs-xl">.fs-xl</div>
<div class="fs-2xl">.fs-2xl</div>
<div class="fs-3xl">.fs-3xl</div>
<div class="fs-4xl">.fs-4xl</div>
<div class="fs-5xl">.fs-5xl</div>
<div class="fs-6xl">.fs-6xl</div>

行内文本元素

常见内联 HTML5 元素的样式。

你可以使用 mark 标签来强调文本。

~~这行文字被视为已删除的文本。~~

~~这行文字被认为不再准确。~~

这行文字被视为对文档的补充。

这一行文字将显示为下划线。

这行文字应被视为小字部分。

这一行显示为加粗文本。

这一行显示为斜体文本。

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>

请注意，这些标签应该用于语义目的：

 表示用于参考或标注目的而被标记或高亮的文本。
 表示旁注和小字部分，如版权和法律文本。
<s> 表示不再相关或不再准确的元素。
 表示一段应以显示其具有非文本注释方式呈现的行内文本。

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

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

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

文本工具

工具类类可用于大多数常见的文本相关 CSS 属性。

使用我们的文本和颜色工具更改文本对齐方式、变形、样式、粗细、行高、装饰和颜色。

缩写

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

在缩写中添加.initialism以稍微减小字体大小。

属性

HTML

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

引用块

将 <blockquote class="blockquote"> 包裹在任何 HTML 周围，以引用文档中来自其他来源的内容块。我们将 .blockquote 设为弹性容器以便于间距，这意味着你可以使用弹性工具类来进行对齐、间距等操作。

一个包含在引用块元素中的著名引用。

HTML

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

一个包含在引用块元素中的著名引用。
原始引用的第二部分——就像另一个段落——也将放在这里。这个段落稍微长一些，以展示文本在引用样式块内是如何换行的。

HTML

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
  <p>And the second part of the original quote—like another paragraph—would be placed here as well. This paragraph is a little longer to show how text would wrap within the blockquote styling.</p>
</blockquote>

来源

HTML 规范要求引用来源必须放置在 blockquote 中外面这 <blockquote>. 在这种情况下，使用一个 <figure> 元素并放置 .blockquote 而不是上面的课程 <blockquote> 元素。这确保了在引用块和出处元素中访问 CSS 变量。

对于来源归属，使用 <figcaption> 或块级元素（例如 ），并加上 .blockquote-footer 类。将任何来源作品的名称也用 <cite> 包裹。

一个包含在引用块元素中的著名引用。

HTML

<figure class="blockquote">
  <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>

嵌套

一个包含在引用块元素中的著名引用。
一个包含在引用块元素中的著名引用。

HTML

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

对齐

根据需要使用文本或弹性工具更改引用块的对齐方式。

一个包含在引用块元素中的著名引用。

HTML

<figure class="blockquote text-center">
  <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>

一个包含在引用块元素中的著名引用。

HTML

<figure class="blockquote align-items-end">
  <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>

列表

无样式

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

这是一个列表。
它看起来完全没有样式。
从结构上看，它仍然是一个列表。
然而，这种样式只适用于直接子元素。
嵌套列表：
- 不受这种风格影响
- 仍然会显示一个项目符号
- 并具有适当的左边距
在某些情况下，这仍然可能派上用场。

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>

内联

删除列表的项目符号并应用一些浅色 margin 结合两种课程， .list-inline 和 .list-inline-item.

这是一个列表项。
还有一个。
但是它们是内联显示的。

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>

描述列表对齐

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

描述列表

描述列表非常适合定义术语。

术语

该术语的定义。

还有一些占位符定义文本。

另一个术语

这个定义很短，所以没有额外的段落或任何内容。

被截断的术语被截断

当空间紧张时，这可能会很有用。在末尾添加省略号。

巢式

嵌套定义列表: 我听说你喜欢定义列表。让我在你的定义列表里放一个定义列表。

HTML

<dl class="row">
  <dt class="sm:col-3">Description lists</dt>
  <dd class="sm:col-9">A description list is perfect for defining terms.</dd>

  <dt class="sm:col-3">Term</dt>
  <dd class="sm:col-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="sm:col-3">Another term</dt>
  <dd class="sm:col-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="sm:col-3 text-truncate">Truncated term is truncated</dt>
  <dd class="sm:col-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="sm:col-3">Nesting</dt>
  <dd class="sm:col-9">
    <dl class="row">
      <dt class="sm:col-4">Nested definition list</dt>
      <dd class="sm:col-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

响应式字体大小

Bootstrap 使用 CSS 的 clamp() 函数来实现响应式字体大小，使文本能够在不同设备和视口尺寸上更自然地缩放。

CSS

变量

全部 --font-size-* 和 --line-height-* CSS 自定义属性定义在 _root.scss，由…生成 $font-sizes Sass map输入 _config.scss.

CSS

          :root {
  /* Abbreviated list for example purposes… */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  /* Plus the rest… */
}

标题、段落、描述列表和<legend>元素—在此处和重启中涵盖—使用专用的 CSS 变量进行实时自定义，这些变量在 _reboot.scss 中定义。

scss/content/_重置.scss

// stylelint-disable-next-line scss/dollar-variable-default
$type-tokens: defaults(
  (
    --heading-margin-bottom: var(--spacer-2),
    --heading-font-family: null,
    --heading-font-style: null,
    --heading-line-height: 1.2,
    --paragraph-margin-bottom: var(--spacer),
    --legend-margin-bottom: var(--spacer-2),
    --legend-font-size: 1.5rem,
    --legend-font-weight: null,
    --list-padding-x: var(--spacer-7),
  ),
  $type-tokens
);

Sass map

这 $font-sizes 映射到 _config.scss 定义了 Bootstrap 的类型比例。每个键（例如， xs, md, 3xl) 包含一个嵌套映射，其中 font-size 和 line-height 值。较大的尺寸使用 clamp() 用于响应式缩放。

scss/_config.scss

$font-sizes: ();
// stylelint-disable-next-line scss/dollar-variable-default
$font-sizes: defaults(
  (
    "xs": (
      "font-size": .75rem,
      "line-height": 1.25
    ),
    "sm": (
      "font-size": .875rem,
      "line-height": 1.5
    ),
    "md": (
      "font-size": 1rem,
      "line-height": 1.5
    ),
    "lg": (
      "font-size": clamp(1.125rem, 1rem + .625vw, 1.25rem),
      "line-height": 1.5
    ),
    "xl": (
      "font-size": clamp(1.5rem, 1.1rem + .75vw, 1.75rem),
      "line-height": calc(2.5 / 1.75)
    ),
    "2xl": (
      "font-size": clamp(1.75rem, 1.3rem + 1vw, 2rem),
      "line-height": calc(3 / 2.25)
    ),
    "3xl": (
      "font-size": clamp(2rem, 1.5rem + 1.875vw, 2.5rem),
      "line-height": 1.2
    ),
    "4xl": (
      "font-size": clamp(2.25rem, 1.75rem + 2.5vw, 3rem),
      "line-height": 1.1
    ),
    "5xl": (
      "font-size": clamp(3rem, 2rem + 5vw, 4rem),
      "line-height": 1.1
    ),
    "6xl": (
      "font-size": clamp(3.75rem, 2.5rem + 6.25vw, 5rem),
      "line-height": 1
    ),
  ),
  $font-sizes
);

你可以重写单个键，替换整个映射，或者通过将键设置为 null 来删除它们：

SCSS

          // Per-key override
@use "bootstrap/scss/config" with (
  $font-sizes: ("xs": ("font-size": .625rem, "line-height": 1.25))
);

// Remove a key
@use "bootstrap/scss/config" with (
  $font-sizes: ("6xl": null)
);

Sass 循环

字体大小映射用于生成 --font-size-* 和 --line-height-* CSS 自定义属性中的 _root.scss以及 .fs-* 和 .text-* 工具类在 _utilities.scss.

scss/_root.scss

// Generate font-size and line-height tokens
@each $name, $props in $font-sizes {
  $root-tokens: map.set($root-tokens, --font-size-#{$name}, map.get($props, "font-size"));
  $root-tokens: map.set($root-tokens, --line-height-#{$name}, map.get($props, "line-height"));
}

scss/_utilities.scss

"font-size": (
  property: font-size,
  class: fs,
  values: map-get-nested($font-sizes, "font-size")
),
"text-size": (
  property: (
    "font-size": 1rem,
    "line-height": 1.5
  ),
  class: text,
  values: $font-sizes
),