跳到主要內容 跳到文檔導航
in English

排版

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

全局設置

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

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

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

標題

所有 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
顯示 5
顯示 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-sizesSass 映射和兩個變量$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

這是一個引導段落。它從常規段落中脫穎而出。

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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>代表旁注和小字,如版權和法律文本。
  • <s>表示不再相關或不再準確的元素。
  • <u>表示一段內聯文本,應該以表明它具有非文本註釋的方式呈現。

如果要設置文本樣式,則應改用以下類:

  • .mark將應用與 相同的樣式<mark>
  • .small將應用與 相同的樣式<small>
  • .text-decoration-underline將應用與 相同的樣式<u>
  • .text-decoration-line-through將應用與 相同的樣式<s>

<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作為引用。

眾所周知的引用,包含在 blockquote 元素中。

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

命名源

HTML 規範要求將塊引用屬性放在<blockquote>. 提供屬性時,將您的內容包裝<blockquote>在 a 中<figure>並在類中使用 a<figcaption>或塊級元素(例如<p>.blockquote-footer。確保也包含源作品的名稱<cite>

眾所周知的引用,包含在 blockquote 元素中。

<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 元素中。

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

眾所周知的引用,包含在 blockquote 元素中。

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

列表

無樣式

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

排隊

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

  • 這是一個列表項。
  • 還有一個。
  • 但它們是內聯顯示的。
<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>

響應式字體大小

在 Bootstrap 5 中,我們默認啟用了響應式字體大小,允許文本更自然地跨設備和視口大小縮放。查看RFS 頁面以了解其工作原理。

薩斯

變量

標題有一些用於大小和間距的專用變量。

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

此處和Reboot中介紹的其他排版元素也有專用變量。

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

混合

沒有專門用於排版的 mixin,但 Bootstrap 確實使用了響應式字體大小 (RFS)