前言

Badge 是一個標籤元件，像是一個訊息未讀右上角會有一個未讀的數量的樣式。

span 標籤與 badge

一個標籤組件我們使用 span 標籤，因為他是一個行的元素，當你使用標題標籤他會隨著字元大小放大，在裡面的 ㄏlass 我們放入 badge badge-xxx xxx 總共有五種樣式已修改。

• primary
• secondary
• success
• info
• warning
• danger

<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-success">New</span></h2>
<h3>Example heading <span class="badge badge-info">New</span></h3>

badge 圓角化

在 class 加入 badge-pill 就能將 badge 圓角化 pill 的中文意思是膠囊藥丸，就像膠囊一樣的感覺。

<span class="badge badge-primary badge-pill">new</span>
<span class="badge badge-secondary badge-pill">new</span>

參考：https://v4-alpha.getbootstrap.com/components/badge/