文字排版（Typography）
Bootstrap排版的文檔和示例，包括全局設(shè)置、標(biāo)題、正文、列表等。
全局設(shè)置
Bootstrap設(shè)定基本的全局顯示、文字排版和連接樣式。當(dāng)需要更多的控制時(shí)，查看 文本通用類。
- 為每個(gè)操作系統(tǒng)和設(shè)備標(biāo)明最佳font-family的原生字體堆疊。
- 為了更具包容性和可訪問性，我們使用瀏覽器的默認(rèn)根字體大小（通常為16px），以便訪問者可以根據(jù)需要自定義瀏覽器的默認(rèn)值。
- 使用$font-family-base、$font-size-base和$line-height-base屬性作為應(yīng)用于
<body>的排版基礎(chǔ)。 - 通過
$link-color設(shè)置全局鏈接顏色。 - 使用$body-bg在
<body>上設(shè)置背景色（默認(rèn)情況下為#fff）。
這些樣式可以在中找到_reboot.scss，全局變量在中定義_variables.scss. 確保在rem中設(shè)置$font size base。
標(biāo)題
所有的HTML標(biāo)題，<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類也可用，用于當(dāng)您希望匹配標(biāo)題的字體樣式但無法使用關(guān)聯(lián)的HTML元素時(shí)。
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>自定義標(biāo)題
使用通用類重現(xiàn)Bootstrap 3.0中的小標(biāo)題文本。
Fancy display heading With faded secondary text
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>顯示標(biāo)題
一般的標(biāo)題元素能在頁面內(nèi)容繁多時(shí)發(fā)揮最佳作用。當(dāng)你需要突出一個(gè)標(biāo)題時(shí)，請考慮使用display heading以獲得更大、更細(xì)、稍具有風(fēng)格化的標(biāo)題樣式。
<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>
顯示標(biāo)題通過$display-font-sizes Sass map和兩個(gè)變量配置，$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;
前導(dǎo)主題
使用.lead讓一個(gè)段落脫穎而出。
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>內(nèi)聯(lián)文本元素
常見內(nèi)聯(lián)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>請注意，這些標(biāo)記應(yīng)用于語義目的：
<mark>表示為參考或注釋目的而標(biāo)記或突出顯示的文本。<small>表示旁注和小字體，如版權(quán)和法律文本。<s>表示不再相關(guān)或不再準(zhǔn)確的元素。<u>表示內(nèi)聯(lián)文本的范圍，該范圍應(yīng)以指示其具有非文本注釋的方式呈現(xiàn)。
如果要設(shè)置文本樣式，應(yīng)改用以下類：
.mark將應(yīng)用與<mark>相同的樣式。.small將應(yīng)用與<small>相同的樣式。.text-decoration-underline修飾下劃線將應(yīng)用與<u>相同的樣式。.text-decoration-line-through裝飾線條將應(yīng)用與<s>相同的樣式。
雖然上面沒有顯示，但是可以在HTML5中隨意使用 <b> and <i> 用來突出單詞或短語而不傳達(dá)額外的重要性，而<i> 主要用于語音、技術(shù)術(shù)語等。
文本通用類
使用我們的文本工具和顏色工具更改文本對齊、轉(zhuǎn)換、樣式、權(quán)重、行高、裝飾和顏色。 文本工具 and 顏色工具.
縮寫
對縮寫和字母前綴縮寫使用HTML<abbr> 元素以Hover方式顯示縮寫的擴(kuò)增內(nèi)容。縮寫具有預(yù)設(shè)的底線和說明光標(biāo)，通過懸停和輔助性技術(shù)幫助使用者提供額外的內(nèi)容。
縮寫字加入.initialism可將字體略為縮小。
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>引用
用于引用文檔中其他來源的內(nèi)容塊。將<blockquote class="blockquote"> 環(huán)繞任何HTML作為引號(hào)。
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規(guī)范要求將blockquote歸屬于 <blockquote>之外。當(dāng)提供來源歸屬，需要將 <blockquote>包在<figure>之內(nèi)，并且使用<figure>和加上 .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as
類的<figcaption>或是一個(gè)內(nèi)存塊元素（例如：
）。還要確保將來源的名稱包在中。
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>列表
無樣式
刪除列表項(xiàng)的默認(rèn)列表樣式和左邊距（僅限直接子項(xiàng)）。這只適用于直接子列表項(xiàng)，這意味著您還需要為任何嵌套列表添加類。
- 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>內(nèi)聯(lián)
移除了列表編號(hào)并增加些許margin，結(jié)合使用.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>描述型列表對齊
通過使用我們網(wǎng)格系統(tǒng)定義的類別（或是語意mixins）將項(xiàng)目和說明水平對齊。對于較長的術(shù)語，你可選擇性加上.text-truncate來用…取代多余內(nèi)容。
- 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>響應(yīng)字體大小
在bootstrap5中，我們默認(rèn)啟用了響應(yīng)字體大小，允許文本在設(shè)備和視口大小之間更自然地縮放。查看RFS頁面以了解其工作原理。
Sass
Variables
標(biāo)題有一些用于調(diào)整大小和間距的專用變量。
$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使用響應(yīng)字體大小（RFS）。 Responsive Font Sizing (RFS).