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>
自己動手試一試 »徽章也可以用於其他元素內部,例如按鈕。
以下示例顯示如何將徽章新增到按鈕中。
標籤
標籤用於提供關於某項內容的附加資訊。
示例 新
示例 新
示例 新
示例 新
示例 新
示例 新
使用 .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>
自己動手試一試 »