選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 5 文字/排版


Bootstrap 5 預設設定

Bootstrap 5 使用預設的 font-size 為 1rem(預設 16px),其 line-height 為 1.5。

此外,所有 <p> 元素都有 margin-top: 0margin-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

示例

顯示 1

顯示 2

顯示 3

顯示 4

顯示 5

顯示 6

自己動手試一試 »

<small>

在 Bootstrap 5 中,HTML <small> 元素(和 .small 類)用於在任何標題中建立更小、次要的文字。


<mark>

Bootstrap 5 會為 <mark>.mark 設定黃色背景色和一些內邊距。

示例

使用 mark 元素來高亮文字。

自己動手試一試 »


<abbr>

Bootstrap 5 會為 HTML <abbr> 元素設定下劃線為虛線,並在懸停時顯示問號游標。

示例

WHO成立於 1948 年。

自己動手試一試 »

<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 一起使用) 試一試

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援