微章
微章效果
在元素内添加span元素,使用.badge
样式,定义为徽章样式。
<p>微章 <span class="badge">文字</span></p> <a href="javascript:;">微章 <span class="badge">99+</span></a>
圆点徽章
<p>微章 <span class="badge badge-dot"></span></p> <a href="javascript:;">微章 <span class="badge badge-dot"></span></a>
颜色圆角
应用.bg
-颜色或.text
-颜色可改变徽章的背景或文字颜色。
徽章颜色
<p>微章 <span class="badge bg-main text-silver">文字</span></p> <a href="javascript:;">圆点徽章 <span class="badge badge-dot bg-gray"></span></a>
徽章圆角
默认的徽章为圆角效果,也可以通过叠加.radius
-尺寸样式,改变微章的圆角效果。
<p>微章 <span class="badge bg-main radius">文字</span></p> <a href="javascript:;">圆点徽章 <span class="badge badge-dot radius"></span></a>
徽章角标
同时,徽章也可以当角标使用,在其父元素上叠加.badge-corner
样式,显示在父元素的右上角。
<button class="button badge-corner">微章角标 <span class="badge badge-dot"></span></button> <button class="button badge-corner">微章角标 <span class="badge bg-main">1</span></button>
移除徽章
在需要触发的元素上添加属性data-dismiss="badge"内容,当点击此元素时,即可移除徽章。
<button class="button badge-corner" data-dismiss="badge">微章角标 <span class="badge bg-main">1</span></button> <a href="javascript:;" data-dismiss="badge">圆点徽章 <span class="badge badge-dot"></span></a>