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

親自試一試

display 標題

display 標題用于比普通標題更突出（更大的 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>。當命名來源時，例如“來自世界自然基金會的網站”，請使用 .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-left 規定左對齊文本。 試一試
.text-break 防止長文本破壞布局。 試一試
.text-center 規定居中對齊的文本。 試一試
.text-decoration-none 刪除鏈接中的下劃線。 試一試
.text-end 規定右對齊文本。 試一試
.text-nowrap 規定文本不換行。 試一試
.text-lowercase 規定小寫文本。 試一試
.text-uppercase 規定大寫文本。 試一試
.text-capitalize 規定大寫文本。 試一試
.initialism 以稍小的字體顯示 <abbr> 元素內的文本。 試一試
.list-unstyled 刪除列表項的默認 list-style 和左外邊距（適用于 <ul> 和 <ol>）。
此類僅適用于直接子列表項。
如需從任何嵌套列表中刪除默認列表樣式，也請將此類應用于嵌套列表。		 試一試
.list-inline 將所有列表項放在一行上。
請與每個 <li> 元素上的 .list-inline-item 一起使用。		 試一試