文字排版（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).