View on GitHub

Typography

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

On this page

全局设置

Bootstrap会设置基本的全局显示、排版和链接样式。当需要更多控制时，请查找文本实用工具集。

使用[本机字体堆栈]](/docs/5.3/content/reboot/#native-font-stack)，为每个操作系统和设备选择最佳的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 headings

传统的标题元素被设计为在页面内容的核心部分发挥最佳作用。当你需要一个标题来突出显示时，可以考虑使用display heading——一种更大、稍微更醒目的标题样式。

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-sizesSass Map和两个变量$display-font-weight和$display-line-height进行配置。

显示标题可通过两个变量自定义，即$display-font-family和$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使段落突出。

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元素的样式。

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>

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

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

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

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

虽然上面没有显示，但可以在HTML5中随意使用＜b＞和＜i＞。 <b> 是指突出单词或短语而不传达额外的重要性，而<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变量

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

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

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 mixins

没有专门的排版mixins，但Bootstrap确实使用了响应式字体大小（RFS）。