BootStrap徽章

最新推荐文章于 2023-10-16 11:14:38 发布

秋城落叶

最新推荐文章于 2023-10-16 11:14:38 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/qq_40861561/article/details/105216638

版权

本文介绍了BootStrap徽章组件的用法，包括如何在链接和导航元素中显示未读信息，以及徽章在不同浏览器中的兼容性问题。特别提到在Internet Explorer 8中由于不支持某些CSS选择符，徽章可能无法自动隐藏。同时，Bootstrap提供了让徽章在胶囊式导航激活状态下保持一致样式的解决方案。

摘要由CSDN通过智能技术生成

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现) 。

跨浏览器兼容性

徽章组件在 Internet Explorer 8 浏览器中不会自动消失，因为 IE8 不支持 :empty 选择符。

适配导航元素的激活状态

Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。

1.超链旁的徽章

2.按钮中的徽章

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<body>
<a href="#">活动<span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
   消息<span class="badge">4</span>
</button>

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">活动<span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">关于我</a></li>
  <li role="presentation"><a href="#">消息<span class="badge">3</span></a></li>
</ul>
</body>
</html>