文字排版（Typography）

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

On this page

全局设置

Bootstrap设定基本的全局显示、文字排版和连接样式。当需要更多的控制时，查看文本通用类。

为每个操作系统和设备标明最佳font-family的原生字体堆叠。
为了更具包容性和可访问性，我们使用浏览器的默认根字体大小（通常为16px），以便访问者可以根据需要自定义浏览器的默认值。
使用$font-family-base、$font-size-base和$line-height-base属性作为应用于<body>的排版基础。
通过$link-color设置全局链接颜色。
使用$body-bg在<body>上设置背景色（默认情况下为#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

<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.0中的小标题文本。

Fancy display heading With faded secondary text

<h3>
        Fancy display heading
        <small class="text-muted">With faded secondary text</small>
        </h3>

显示标题

一般的标题元素能在页面内容繁多时发挥最佳作用。当你需要突出一个标题时，请考虑使用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-sizes Sass map和两个变量配置，$display-font-weight和$display-line-height。

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

前导主题

使用.lead让一个段落脱颖而出。

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

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

<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> and <i> 用来突出单词或短语而不传达额外的重要性，而<i> 主要用于语音、技术术语等。

文本通用类

使用我们的文本工具和颜色工具更改文本对齐、转换、样式、权重、行高、装饰和颜色。文本工具 and 颜色工具.

缩写

对缩写和字母前缀缩写使用HTML<abbr> 元素以Hover方式显示缩写的扩增内容。缩写具有预设的底线和说明光标，通过悬停和辅助性技术帮助使用者提供额外的内容。

缩写字加入.initialism可将字体略为缩小。

attr

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.

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

引用来源

HTML规范要求将blockquote归属于 <blockquote>之外。当提供来源归属，需要将 <blockquote>包在<figure>之内，并且使用<figure>和加上 .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as 类的<figcaption>或是一个内存块元素（例如：

）。还要确保将来源的名称包在中。

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

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

对齐

使用文字通用类来更改blockquote的对齐方式。

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

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

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

列表

无样式

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

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.

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

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

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

描述型列表对齐

通过使用我们网格系统定义的类别（或是语意mixins）将项目和说明水平对齐。对于较长的术语，你可选择性加上.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.

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

响应字体大小

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

Sass

Variables

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

$headings-margin-bottom:      $spacer / 2;
        $headings-font-family:        null;
        $headings-font-style:         null;
        $headings-font-weight:        500;
        $headings-line-height:        1.2;
        $headings-color:              null;

本文和本文中介绍的各种排版元素也有专用的变量。

$lead-font-size:              $font-size-base * 1.25;
        $lead-font-weight:            300;
        
        $small-font-size:             .875em;
        
        $sub-sup-font-size:           .75em;
        
        $text-muted:                  $gray-600;
        
        $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;
        $hr-height:                   $border-width;
        $hr-opacity:                  .25;
        
        $legend-margin-bottom:        .5rem;
        $legend-font-size:            1.5rem;
        $legend-font-weight:          null;
        
        $mark-padding:                .2em;
        
        $dt-font-weight:              $font-weight-bold;
        
        $nested-kbd-font-weight:      $font-weight-bold;
        
        $list-inline-padding:         .5rem;
        
        $mark-bg:                     #fcf8e3;

Mixins

没有专门用于排版的mixin，但是Bootstrap使用响应字体大小（RFS）。 Responsive Font Sizing (RFS).