拼图开发文档

微章

微章效果

在元素内添加span元素,使用.badge样式,定义为徽章样式。

微章 文字

微章 99+
    <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>