標籤 - Badges
與標題一起使用
範例標題 New
範例標題 New
範例標題 New
範例標題 New
範例標題 New
範例標題 New
1
2
3
4
5
6
<h1>範例標題 <span class="badge badge-secondary">New</span></h1>
<h2>範例標題 <span class="badge badge-secondary">New</span></h2>
<h3>範例標題 <span class="badge badge-secondary">New</span></h3>
<h4>範例標題 <span class="badge badge-secondary">New</span></h4>
<h5>範例標題 <span class="badge badge-secondary">New</span></h5>
<h6>範例標題 <span class="badge badge-secondary">New</span></h6>
嵌入在按鈕裡面
1
2
3
4
5
6
<button class="btn btn-primary">主要<span class="badge">1</span></button>
<button class="btn btn-secondary"><i class="icon icon-user"></i>次要<span class="badge">12</span></button>
<button class="btn btn-danger">危險<span class="badge">1,234</span></button>
<button class="btn btn-warn">警告<span class="badge">12,345</span></button>
<a class="btn btn-link" tabindex="0">超連結<span class="badge">123</span></a>
<button class="btn">預設<span class="badge">12,345</span></button>
情境變化
主要
次要
成功
危險
警告
資訊
類型1
類型2
光明
黑暗
1
2
3
4
5
6
7
8
9
10
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危險</span>
<span class="badge badge-warn">警告</span>
<span class="badge badge-info">資訊</span>
<span class="badge badge-type1">類型1</span>
<span class="badge badge-type2">類型2</span>
<span class="badge badge-light">光明</span>
<span class="badge badge-dark">黑暗</span>
膠囊標籤
主要
次要
成功
危險
警告
資訊
類型1
類型2
光明
黑暗
1
2
3
4
5
6
7
8
9
10
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-secondary">次要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-danger">危險</span>
<span class="badge badge-pill badge-warn">警告</span>
<span class="badge badge-pill badge-info">資訊</span>
<span class="badge badge-pill badge-type1">類型1</span>
<span class="badge badge-pill badge-type2">類型2</span>
<span class="badge badge-pill badge-light">光明</span>
<span class="badge badge-pill badge-dark">黑暗</span>
連結
1
2
3
4
5
6
7
8
9
10
<a class="badge badge-pill badge-primary">主要</a>
<a class="badge badge-pill badge-secondary">次要</a>
<a class="badge badge-pill badge-success">成功</a>
<a class="badge badge-pill badge-danger">危險</a>
<a class="badge badge-pill badge-warn">警告</a>
<a class="badge badge-pill badge-info">資訊</a>
<a class="badge badge-pill badge-type1">類型1</a>
<a class="badge badge-pill badge-type2">類型2</a>
<a class="badge badge-pill badge-light">光明</a>
<a class="badge badge-pill badge-dark">黑暗</a>