????徽章，Bootstrap4的組件之一，用于計(jì)數(shù)和標(biāo)簽展示。這個(gè)組件對我們來說并不陌生，QQ的未讀消息小紅點(diǎn)就是其中之一，這個(gè)組件是我這種強(qiáng)迫癥的天敵，但并不是沒有用。
????徽章使用相對字體大小和em單位來縮放以匹配直接父元素的大小,徽章可以用作鏈接或按鈕的一部分來提供計(jì)數(shù)器。
使用方法：
直接在需要添加計(jì)數(shù)器標(biāo)簽的元素上標(biāo)明類badge即可，badge自帶顏色輔助類，通常用于span，a標(biāo)簽。

基本用法

將帶有badge類的標(biāo)簽嵌入需要計(jì)數(shù)標(biāo)簽的元素中即可，如下

<div>
     <button type="button" class="btn btn-primary">
        消息
        <span class="badge badge-danger">2</span>
    </button>
</div>

結(jié)果展示

顏色

badge自帶顏色，只需在在badge基礎(chǔ)下添加badge-*類即可如下：

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

結(jié)果展示

注：<a> 標(biāo)簽帶顏色后自帶hover樣式