Bootstrap标签badge徽章元素组件与标签相似,主要的区别在于徽章的边角更加圆滑。badge徽章元素用于显示指标或一些分类的计数的小而简单的组件。它们通常可以在用于推送通知突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类链接和按钮都适用:
<a href="#">信息<span class="badge">10</span></a>
徽章标签为空时:如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现)。
跨浏览器兼容性。徽章组件在 Internet Explorer 8 浏览器中不会自动消失,因为 IE8 不支持 :empty 选择符。适配导航元素的激活状态 Bootstrap 提供了内置的样式,让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。
.badge:empty {
display: none;
}
//激活状态自动适配色调
注意:不过和标签组件不一样的是:在徽章组件中没有提供多种颜色风格的效果,不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。
通过上文的介绍大家对徽章是不是有了大概的了解,希望大家把徽章应用到自己的网站建设中,真正的做到学以致用。