BootStrap徽章

喜欢ヅ旅行 2023-07-19 12:27 122阅读 0赞

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

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

#### 跨浏览器兼容性 ####

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

#### 适配导航元素的激活状态 ####

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

1.超链旁的徽章

2.按钮中的徽章

![format_png][]

<!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>

[format_png]: /images/20230528/cf2288939f674e809e5d373d1668d835.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关构建 Tailwind CSS 徽章组件

现在我们已经创建了一个徽章元素。但是，如果您想创建稍大一点的徽章怎么办？没问题，您所需要做的就是增加徽章的填充和字体大小。我建议span为徽章使用一个简单的元素，以便可以...

我不是女神ヾ/ 2024年05月07日 22:10/ 0 赞/ 108 阅读

相关 Bootstrap3 （Label）和徽章（Badges）

Label标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签；也可以使用修饰的 class label-default、label-pr

快来打我*/ 2023年10月18日 14:47/ 0 赞/ 49 阅读

相关【Bootstrap】014-组件：分页、标签、徽章、巨幕、页头

目录一、分页 1、概述 2、默认分页代码演示：运行结果：备注： 3、禁用和激活状态代码演示：运行结果： 4、尺寸代码演示：运行结果：

太过爱你忘了你带给我的痛/ 2023年10月05日 11:08/ 0 赞/ 34 阅读

相关 BootStrap徽章

给链接、导航等元素嵌套 `<span class="badge">` 元素，可以很醒目的展示新的或未读的信息条目。如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章

喜欢ヅ旅行/ 2023年07月19日 12:27/ 0 赞/ 123 阅读

相关 Bootstrap教程(5)--使用标签、徽章、巨幕、Well

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 标签 3. 徽章 4. 巨幕 5. Well

谁借莪１个温暖的怀抱￠/ 2022年10月30日 09:25/ 0 赞/ 185 阅读

相关 3.6Bootstrap学习组件篇之分页、徽章

分页 1、默认分页代码段： <h1 class="page-header">默认分页</h1> <ul class="pagination">

电玩女神/ 2022年08月27日 03:49/ 0 赞/ 194 阅读

相关用halcon提取衣服徽章

[用halcon提取衣服徽章][halcon] 收到一封email，有个学员求助去除衣服上纹理的干扰，然后提取衣服上徽章的边缘的方法。我想他肯定是个很努力上进的b

╰半橙微兮°/ 2022年07月15日 00:03/ 0 赞/ 132 阅读

相关 Bootstrap路径分页标签和徽章组件

路径组件 > 路径组件也叫面包屑导航 <ol class="breadcrumb"> <li><a href="">首页</a></li>

亦凉/ 2022年06月12日 05:07/ 0 赞/ 251 阅读

相关设置应用图标badge(徽章)

// 图标右上角的数字 [UIApplication sharedApplication].applicationIconBadgeNumber

矫情吗；*/ 2021年12月20日 01:47/ 0 赞/ 288 阅读

相关响应式前端框架Bootstrap系列（10）字体图标和消息徽章

字体图标是bs框架中非常好用的一个功能，只要添加简单的样式，无需导入图标即可实现图标的显示。通常使用<span>渲染字体图标，并将该元素放置在<button>或<a>内。这个是

傷城~/ 2021年09月14日 14:14/ 0 赞/ 305 阅读