在 GitHub 上檢視

排版

Bootstrap 排版的文件和範例，包括全域設定、標題、主體文字、清單等等。

全域設定

Bootstrap 設定了基本的全域顯示、排版和連結樣式。當需要更多控制時，請查看文字工具程式類別。

  • 使用原生字體堆疊，為每個作業系統和裝置選擇最佳的 font-family。
  • 為了更具包容性和無障礙的字體大小，我們使用瀏覽器預設的根 font-size（通常為 16px），因此訪客可以根據需要自訂其瀏覽器預設值。
  • 使用 $font-family-base、$font-size-base 和 $line-height-base 屬性作為套用至 <body> 的排版基礎。
  • 透過 $link-color 設定全域連結顏色，並僅在 :hover 時套用連結底線。
  • 使用 $body-bg 在 <body> 上設定 background-color（預設為 #fff）。

這些樣式可以在 _reboot.scss 中找到，而全域變數則定義在 _variables.scss 中。請務必在 rem 中設定 $font-size-base。

標題

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

標題 範例
<h1></h1> h1. Bootstrap 標題
<h2></h2> h2. Bootstrap 標題
<h3></h3> h3. Bootstrap 標題
<h4></h4> h4. Bootstrap 標題
<h5></h5> h5. Bootstrap 標題
<h6></h6> h6. Bootstrap 標題 
<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 標題

h2. Bootstrap 標題

h3. Bootstrap 標題

h4. Bootstrap 標題

h5. Bootstrap 標題

h6. Bootstrap 標題

<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，讓段落醒目。

這是一個導言段落。它與一般段落不同。 

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

內嵌文字元素

常見內嵌 HTML5 元素的樣式。

您可以使用 mark 標籤來重點標示文字。

這行文字應視為已刪除的文字。

這行文字應視為不再準確。

這行文字應視為新增至文件。

這行文字將會顯示為底線

這行文字應視為細字。

這行文字會顯示為粗體文字。

這行文字會顯示為斜體文字。

<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> 相同的樣式，同時避免這些標籤會帶來的任何不必要的語意暗示。

儘管上述未顯示，請隨時在 HTML5 中使用 <b> 和 <i>。<b> 用於強調字詞或片語，而不會傳達額外的重要性，而 <i> 則主要用於語音、技術術語等。

文字工具程式

使用我們的文字工具程式和色彩工具程式，變更文字對齊、轉換、樣式、粗細和色彩。

縮寫

HTML 的 <abbr> 元素的樣式化實作，用於縮寫和頭字語，在滑鼠游標移入時顯示展開的版本。縮寫預設有底線，並會在滑鼠游標移入時顯示說明游標，以提供額外的內容，並供輔助技術使用者使用。

將 .initialism 加入縮寫，以使用稍小的字體大小。

屬性

HTML

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

區塊引用

用於在文件中引用來自其他來源的內容區塊。將 <blockquote class="blockquote"> 包圍在任何 HTML 周圍，作為引用。

一個著名的引用，包含在引用區塊元素中。

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

命名來源

加入 <footer class="blockquote-footer"> 以識別來源。將來源作品的名稱包圍在 <cite> 中。

一個著名的引用，包含在引用區塊元素中。

某個名人，在 來源標題 中
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

對齊

視需要使用文字工具程式來變更引用區塊的對齊方式。

一個著名的引用，包含在引用區塊元素中。

某個名人，在 來源標題 中
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

一個著名的引用，包含在引用區塊元素中。

某個名人，在 來源標題 中
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

清單

無樣式

移除清單項目（僅限直接子項目）的預設 list-style 和左邊距。這僅適用於直接子項目清單項目，表示您也需要為任何巢狀清單加入類別。

  • 這是一個清單。
  • 它看起來完全沒有樣式。
  • 在結構上，它仍然是一個清單。
  • 但是，這個樣式僅適用於直接子元素。
  • 巢狀清單
    • 不受這個樣式影響
    • 仍然會顯示項目符號
    • 並有適當的左邊距
  • 這在某些情況下仍然可能派得上用場。
<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。

  • 這是一個清單項目。
  • 還有另一個。
  • 但它們顯示在同一行中。
<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 類別，以使用省略號來截斷文字。

說明清單
說明清單非常適合定義術語。
術語

術語的定義。

還有一些其他佔位符定義文字。

另一個術語
這個定義很短，所以沒有額外的段落或任何東西。
已截斷的術語已截斷
當空間不足時，這會很有用。在結尾加入省略號。
巢狀
巢狀說明清單
我聽說您喜歡定義清單。讓我將定義清單放入您的定義清單中。
<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>

回應式字體大小

從 v4.3.0 開始，Bootstrap 附帶啟用回應式字型的選項，允許文字在裝置和視窗大小中更自然地縮放。RFS 可以透過將 $enable-responsive-font-sizes Sass 變數變更為 true 並重新編譯 Bootstrap 來啟用。

為了支援 RFS，我們使用 Sass mixin 來取代我們的正常 font-size 屬性。回應式字型會編譯成 calc() 函數，並混合 rem 和視窗單位，以啟用回應式縮放行為。有關 RFS 及其組態的更多資訊，請參閱其 GitHub 儲存庫。