選單
×
   ❮     
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
評論 10
更新 2

數字 (5, 10, and 2) 就是徽章。

使用 .badge 類,放在 <span> 元素內,來建立徽章。

示例

<a href="#">新聞 <span class="badge">5</span></a><br>
<a href="#">評論 <span class="badge">10</span></a><br>
<a href="#">更新 <span class="badge">2</span></a>
自己動手試一試 »

徽章也可以用於其他元素內部,例如按鈕。



以下示例顯示如何將徽章新增到按鈕中。

示例

<button type="button" class="btn btn-primary">主要 <span class="badge">7</span></button>
自己動手試一試 »


標籤

標籤用於提供關於某項內容的附加資訊。

示例

示例

示例

示例

示例
示例

使用 .label 類,後面跟著一個六個上下文類中的一個 .label-default, .label-primary, .label-success, .label-info, .label-warning.label-danger,放在 <span> 元素內,來建立標籤。

示例

<h1>示例 <span class="label label-default">新</span></h1>
<h2>示例 <span class="label label-default">新</span></h2>
<h3>示例 <span class="label label-default">新</span></h3>
<h4>示例 <span class="label label-default">新</span></h4>
<h5>示例 <span class="label label-default">新</span></h5>
<h6>示例 <span class="label label-default">新</span></h6>
自己動手試一試 »

以下示例顯示了所有上下文標籤類。

預設標籤 主要標籤 成功標籤 資訊標籤 警告標籤 危險標籤

示例

<span class="label label-default">預設標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">資訊標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">危險標籤</span>
自己動手試一試 »

透過練習來測試自己

練習

在 "Comments" 文字之後,使用一個 span 元素來建立一個帶有數字二的徽章。

<button>Comments </button>

開始練習



×

聯絡銷售

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

報告錯誤

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

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

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