排版
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>
.h1
through.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
。
這是一個引導段落。它從常規段落中脫穎而出。
<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
類也可用於應用與標籤相同的樣式<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作為引用。
眾所周知的引用,包含在 blockquote 元素中。
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
命名源
添加一個<footer class="blockquote-footer">
用於識別來源。將源作品的名稱包裝在<cite>
.
眾所周知的引用,包含在 blockquote 元素中。
<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 元素中。
<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 元素中。
<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>
排隊
刪除列表的項目符號並使用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>
響應式字體大小
從 v4.3.0 開始,Bootstrap 附帶啟用響應式字體大小的選項,允許文本更自然地跨設備和視口大小縮放。可以通過將Sass 變量更改為並重新編譯 Bootstrap來啟用RFS 。$enable-responsive-font-sizes
true
為了支持RFS,我們使用 Sass mixin 來替換我們的正常font-size
屬性。響應式字體大小將被編譯為calc()
具有混合rem
和視口單元的函數,以啟用響應式縮放行為。有關RFS及其配置的更多信息,請參見其GitHub 存儲庫。