排版

Bootstrap 排版的文檔和示例，包括全局設置、標題、正文、列表等。

全局設置

Bootstrap 設置基本的全局顯示、排版和鏈接樣式。當需要更多控制時，請查看文本實用程序類。

使用為每個操作系統和設備選擇最佳字體的本機字體堆棧。font-family
對於更具包容性和可訪問性的類型比例，我們假設瀏覽器默認根font-size（通常為 16 像素），因此訪問者可以根據需要自定義瀏覽器默認值。
使用$font-family-base、$font-size-base和$line-height-base屬性作為我們應用於<body>.
通過設置全局鏈接顏色$link-color並僅在上應用鏈接下劃線:hover。
用於在(默認情況下)上$body-bg設置 a 。background-color<body>#fff

這些樣式可以在中找到_reboot.scss，全局變量在中定義_variables.scss。確保設置$font-size-base在rem.

標題

所有 HTML 標題，<h1>通過<h6>，都可用。

標題	例子
`<h1></h1>`	h1。引導標題
`<h2></h2>`	h2。引導標題
`<h3></h3>`	h3。引導標題
`<h4></h4>`	h4。引導標題
`<h5></h5>`	h5。引導標題
`<h6></h6>`	h6. 引導標題

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

.h1through.h6類也可用，當您想匹配標題的字體樣式但不能使用關聯的 HTML 元素時。

h1。引導標題

h2。引導標題

h3。引導標題

h4。引導標題

h5。引導標題

h6. 引導標題

<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 重新創建小的二級標題文本。

帶有褪色輔助文本的精美顯示標題

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

顯示標題

傳統的標題元素旨在最適合您的頁面內容。當您需要突出標題時，請考慮使用顯示標題——一種更大、更自以為是的標題樣式。

顯示 1

顯示 2

顯示 3

顯示 4

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

帶領

通過添加使段落脫穎而出.lead。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

內聯文本元素

常用內聯 HTML5 元素的樣式。

您可以使用標記標籤強調文本。

~~這行文本將被視為已刪除的文本。~~

~~這行文本將被視為不再準確。~~

這行文本被視為對文檔的補充。

這行文本將呈現為下劃線

這行文本應被視為精美印刷品。

此行呈現為粗體文本。

此行呈現為斜體文本。

<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類也可用於應用與標籤相同的樣式<mark>，<small>同時避免標籤帶來的任何不需要的語義含義。

<b>雖然上面沒有顯示，但請隨意使用<i>HTML5。<b>旨在突出單詞或短語而不傳達額外的重要性，而<i>主要用於語音、技術術語等。

文本實用程序

使用我們的文本實用程序和顏色實用程序更改文本對齊、變換、樣式、粗細和顏色。

縮寫

<abbr>用於縮寫和首字母縮略詞的 HTML 元素的風格化實現，以在懸停時顯示擴展版本。縮寫具有默認下劃線並獲得幫助光標，以在懸停時和輔助技術用戶提供額外的上下文。

添加.initialism一個略小的字體大小的縮寫。

屬性

HTML

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

塊引用

用於引用文檔中其他來源的內容塊。環繞<blockquote class="blockquote">任何HTML作為引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

命名源

添加一個<footer class="blockquote-footer">用於識別來源。將源作品的名稱包裝在<cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。

源標題中著名的人

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

結盟

根據需要使用文本實用程序來更改塊引用的對齊方式。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。

源標題中著名的人

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。

源標題中著名的人

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表

無樣式

刪除list-style列表項的默認值和左邊距（僅限直接子項）。這僅適用於直接子列表項，這意味著您還需要為任何嵌套列表添加類。

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
馬薩的整數 molestie lorem
pretium nisl aliquet 的促進作用
Nulla volutpat aliquam velit
- 菜豆
- Purus sodales ultricies
- 前庭前庭端口掃描儀
- Ac tristique libero volutpat 在
Faucibus porta lacus fringilla vel
Aenean sat amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

排隊

刪除列表的項目符號並使用margin兩個類的組合應用一些光，.list-inline和.list-inline-item.

Lorem ipsum
菜豆
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

描述列表對齊

使用我們網格系統的預定義類（或語義混合）水平對齊術語和描述。對於更長的術語，您可以選擇添加一個.text-truncate類以使用省略號截斷文本。

描述列表

描述列表非常適合定義術語。

歐伊斯莫德

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。

Donec id elit non mi porta gravida 在 eget metus。

馬勒蘇達門

Etiam porta sem malesuada magna mollis euismod。

被截斷的術語被截斷

Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。

嵌套

嵌套定義列表: Aenean posuere，tortor sed cursus feugiat，nunc augue blandit nunc。

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

響應式排版

響應式排版是指通過簡單地調整font-size一系列媒體查詢中的根元素來縮放文本和組件。Bootstrap 不會為您執行此操作，但如果您需要，添加它相當容易。

這是實踐中的一個例子。font-size選擇您希望的任何s 和媒體查詢。

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}