Bootstrap 4 文字/排版
Bootstrap 4 預設設定
Bootstrap 4 使用預設的 font-size 16px，其 line-height 為 1.5。
預設的 font-family 是 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有 <p> 元素都具有 margin-top: 0 和 margin-bottom: 1rem（預設 16px）。
<h1> - <h6>
Bootstrap 4 使用更粗的字重和更大的字號樣式化 HTML 標題（<h1> 到 <h6>）
示例
h1 Bootstrap 標題 (2.5rem = 40px)
h2 Bootstrap 標題 (2rem = 32px)
h3 Bootstrap 標題 (1.75rem = 28px)
h4 Bootstrap 標題 (1.5rem = 24px)
h5 Bootstrap 標題 (1.25rem = 20px)
h6 Bootstrap 標題 (1rem = 16px)
顯示標題
顯示標題用於比普通標題更突出（更大的字號和更輕的字重），有四個類可供選擇：.display-1、.display-2、.display-3、.display-4
<small>
在 Bootstrap 4 中，HTML <small> 元素用於在任何標題中建立更淺的輔助文字
<mark>
Bootstrap 4 將使用黃色背景顏色和一些填充來樣式化 HTML <mark> 元素
<abbr>
Bootstrap 4 將使用虛線底部邊框樣式化 HTML <abbr> 元素
<blockquote>
當引用來自其他源的內容塊時，將 .blockquote 類新增到 <blockquote>
示例
50 年來，世界自然基金會 (WWF) 一直在保護自然的未來。作為全球領先的環保組織，WWF 在 100 個國家開展工作，並得到美國 120 萬會員和全球近 500 萬會員的支援。
<dl>
Bootstrap 4 將以下列方式樣式化 HTML <dl> 元素
<code>
Bootstrap 4 將以下列方式樣式化 HTML <code> 元素
<kbd>
Bootstrap 4 將以下列方式樣式化 HTML <kbd> 元素
<pre>
Bootstrap 4 將以下列方式樣式化 HTML <pre> 元素
更多排版類
以下 Bootstrap 4 類可以進一步新增到樣式 HTML 元素
| 類 | 描述 | 示例 |
|---|---|---|
.font-weight-bold |
粗體文字 | 試一試 |
.font-weight-bolder |
更粗的文字 | 試一試 |
.font-italic |
斜體文字 | 試一試 |
.font-weight-light |
細體文字 | 試一試 |
.font-weight-lighter |
更細的文字 | 試一試 |
.font-weight-normal |
普通文字 | 試一試 |
.lead |
使段落脫穎而出 | 試一試 |
.small |
表示較小的文字（設定為父級大小的 80%） | 試一試 |
.text-left |
表示左對齊文字 | 試一試 |
.text-*-left |
表示在小、中、大或特大螢幕上左對齊文字 | 試一試 |
.text-break |
防止長文字破壞佈局 | 試一試 |
.text-center |
表示居中文字 | 試一試 |
.text-*-center |
表示在小、中、大或特大螢幕上居中對齊文字 | 試一試 |
.text-decoration-none |
移除連結的下劃線 | 試一試 |
.text-right |
表示右對齊文字 | 試一試 |
.text-*-right |
表示在小、中、大或特大螢幕上右對齊文字 | 試一試 |
.text-justify |
表示兩端對齊文字 | 試一試 |
.text-monospace |
等寬文字 | 試一試 |
.text-nowrap |
表示不換行文字 | 試一試 |
.text-lowercase |
表示小寫文字 | 試一試 |
.text-reset |
重置文字或連結的顏色（繼承自父元素的顏色） | 試一試 |
.text-uppercase |
表示大寫文字 | 試一試 |
.text-capitalize |
表示大寫文字 | 試一試 |
.initialism |
在 <abbr> 元素內顯示文字，字型大小稍小 |
試一試 |
.list-unstyled |
移除列表項的預設列表樣式和左外邊距（適用於 <ul> 和 <ol>）。此類僅適用於直接子列表項（要移除巢狀列表的預設列表樣式，也需將此類應用於任何巢狀列表） |
試一試 |
.list-inline |
將所有列表項放在一行上（與每個 <li> 元素的 .list-inline-item 一起使用） |
試一試 |
.pre-scrollable |
使 <pre> 元素可滾動 |
試一試 |
完整的 Bootstrap 4 CSS 參考
有關 Bootstrap 4 中所有可用 CSS 類的完整參考，請訪問我們的 Bootstrap 4 所有類參考。
