Source

排版

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