Bootstrap 5 文字/排版
Bootstrap 5 預設設定
Bootstrap 5 使用預設的 font-size
為 1rem(預設 16px),其 line-height
為 1.5。
此外,所有 <p>
元素都有 margin-top: 0
和 margin-bottom: 1rem
(預設 16px)。
<h1> - <h6>
Bootstrap 5 為 HTML 標題(<h1>
到 <h6>
)設定了更粗的 font-weight
和響應式的 font-size
。
如果您願意,您也可以在其他元素上使用 .h1
到 .h6
類,使它們表現得像標題。
示例
<p class="h1">h1 Bootstrap 標題</p>
<p class="h2">h2 Bootstrap 標題</p>
<p class="h3">h3 Bootstrap 標題</p>
<p class="h4">h4 Bootstrap 標題</p>
<p class="h5">h5 Bootstrap 標題</p>
<p class="h6">h6 Bootstrap 標題</p>
自己動手試一試 »
顯示標題
顯示標題比普通標題更醒目(更大的 font-size
和更淺的 font-weight
),有六個類可供選擇:.display-1
到 .display-6
。
<small>
在 Bootstrap 5 中,HTML <small>
元素(和 .small
類)用於在任何標題中建立更小、次要的文字。
<mark>
Bootstrap 5 會為 <mark>
和 .mark
設定黃色背景色和一些內邊距。
<abbr>
Bootstrap 5 會為 HTML <abbr>
元素設定下劃線為虛線,並在懸停時顯示問號游標。
<blockquote>
當引用來自另一個來源的內容塊時,請為 <blockquote>
新增 .blockquote
類。當引用來源時,例如“來自 WWF 的網站”,請使用 .blockquote-footer
類。
<dl>
Bootstrap 5 會對 HTML <dl>
元素進行如下樣式設定:
<code>
Bootstrap 5 會對 HTML <code>
元素進行如下樣式設定:
<kbd>
Bootstrap 5 會對 HTML <kbd>
元素進行如下樣式設定:
<pre>
Bootstrap 5 會對 HTML <pre>
元素進行如下樣式設定:
更多排版類
下面的 Bootstrap 5 類可以新增到 HTML 元素以進一步樣式化:
類 | 描述 | 示例 |
---|---|---|
.lead |
使段落脫穎而出 | 試一試 |
.text-start |
表示左對齊文字 | 試一試 |
.text-break |
防止長文字破壞佈局 | 試一試 |
.text-center |
表示居中文字 | 試一試 |
.text-decoration-none |
移除連結的下劃線 | 試一試 |
.text-end |
表示右對齊文字 | 試一試 |
.text-nowrap |
表示不換行文字 | 試一試 |
.text-lowercase |
表示小寫文字 | 試一試 |
.text-uppercase |
表示大寫文字 | 試一試 |
.text-capitalize |
表示大寫文字 | 試一試 |
.initialism |
在 <abbr> 元素內顯示文字,字型大小稍小 |
試一試 |
.list-unstyled |
移除列表項的預設列表樣式和左外邊距(適用於 <ul> 和 <ol> )。此類僅適用於直接子列表項(要移除巢狀列表的預設列表樣式,也需將此類應用於任何巢狀列表) |
試一試 |
.list-inline |
將所有列表項放在一行上(與每個 <li> 元素的 .list-inline-item 一起使用) |
試一試 |