Skip to main content Skip to docs navigation

排版(Typography)

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

全局设置

Bootstrap 设置了基本的全局显示、排版和链接样式。如果需要更多控制,请查看文本实用工具类

  • 使用本地字体堆栈,为每个操作系统和设备选择最佳的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

标题

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

自定义标题

使用附带的实用工具类重新创建 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 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-font-family$display-font-style两个变量自定义。

$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 使段落更加突出。

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>

内联文本元素

常见内联 HTML5 元素的样式。

您可以使用标记标记高亮文本。

这行文字应视为删除文字。

这一行文字被视为不再准确。

这行文字应视为文件的补充。

这行文本将显示为带下划线。

这行文字应被视为精美的印刷体。

该行显示为粗体文字。

该行显示为斜体文本。

html
<p>您可以使用标记标记<mark>高亮</mark>文本。</p>
<p><del>这行文字应视为删除文字。</del></p>
<p><s>这一行文字被视为不再准确。</s></p>
<p><ins>这行文字应视为文件的补充。</ins></p>
<p><u>这行文本将显示为带下划线。</u></p>
<p><small>这行文字应被视为精美的印刷体。</small></p>
<p><strong>该行显示为粗体文字。</strong></p>
<p><em>该行显示为斜体文本。</em></p>

请注意,这些标记应该用于语义目的:

  • <mark> 代表标注或突出显示的文本,用于参考或记事。
  • <small> 代表旁注和小字,如版权和法律文本。
  • <s> 代表不再相关或不再准确的元素。
  • <u> 代表一个内联文本跨度,其呈现方式应表明该跨度具有非文本注释。

如果您想为文本添加样式,应使用以下类来代替:

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

虽然上面没有显示,但是可以在HTML5中随意使用 <b><i> 用来突出单词或短语而不传达额外的重要性,而<i> 主要用于语音、技术术语等。

文本通用类

使用我们的文本通用类和颜色通用类更改文本对齐、转换、样式、权重、行高、装饰和颜色,文本通用类颜色通用类.

缩写

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

在缩写中添加.initialism,使字体略小。

attr

HTML

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

块引用

用于在文档中引用其他来源的内容块。将 <blockquote class=“blockquote”> 包绕任何 HTML 作为引用。

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>

引用来源

HTML 规范要求将blockquote署名放在<blockquote>之外。提供署名时,请将<blockquote>包在<figure>中,并使用<figcaption>或带有.blockquote-footer类的块级元素(如<p>)。请务必将源文件的名称也用 <cite> 包起来。

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>

对齐

根据需要使用文本通用类来更改引文块的对齐方式。

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>

列表

无样式

移除列表项的默认 list-style和左侧边距(仅限直接子列表)。这只适用于直接子列表项,这意味着您还需要为任何嵌套列表添加该类。

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

内联

使用两个类.list-inline.list-inline-item的组合,移除列表的小标题并应用一些浅色margin

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

描述列表对齐

使用我们网格系统的预定义类(或语义混合类)水平对齐术语和描述。对于较长的术语,您可以选择添加.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.
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>

响应字体大小

在 Bootstrap 5 中,我们默认启用了响应式字体大小,使文本在不同设备和视口尺寸下的缩放更加自然。请查看 RFS 页面 ,了解其工作原理。

CSS

Sass 变量

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

$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中涉及的其他排版元素也有专用变量。

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

虽然没有专门用于排版的混合插件,但 Bootstrap 确实使用了 响应字体大小 (RFS)