bootstrap中的标签和徽章

关注

原创最新推荐文章于 2026-05-08 18:22:45 发布 675 阅读 AI 写同款· GEO 优化 ›

如何用 Python 实现自动化测试？详细步骤和代码示例 Python自动化测试实战指南本文系统介绍了使用Python构建自动化测试体系的完整方案。主要内容包括：环境搭建：Python 3.8+虚拟环境配置，安装pytest、Selenium等核心测试库分层测试实现：单元测试：通过计算器示例演示pytest断言和异常测试 API测试：使用requests库进行RESTful接口验证 UI测试：Selenium WebDriver实现网页交互测试高级特性：使用fixture管理测试依赖参数化实现数据驱动测试生成HTML和Allure测试报告 GitH 阅读详情

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>

运行效果见右侧结果窗口。

颜色实现原理：

/*bootstrap.css文件第4286行～第4237行*/

.label-default {
background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}

徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：

在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。

对应的文件版本：

☑ LESS版本:源文件badges.less

☑ Sass版本：源文件_badges.scss

☑ 编译后版本：bootstrap.css文件第4328行～第4366行

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

运行效果见右侧结果窗口。

实现原理：

主要将其设置为椭圆形，并且加了一个背景色：

/*bootstrap.css文件第4328行～第4341行*/

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}

同样也使用:empty伪元素，当没有内容的时候隐藏：

.badge:empty {
display: none;
}

正如开头所说，可以将徽章与按钮或者导航之类配合使用：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　       <a href="##" class="navbar-brand">慕课网</a>
　</div>
  <ul class="nav navbar-nav">
         <li class="active"><a href="##">网站首页</a></li>
         <li><a href="##">系列教程</a></li>
         <li><a href="##">名师介绍</a></li>
         <li><a href="##">成功案例<span class="badge">23</span></a></li>
         <li><a href="##">关于我们</a></li>
  </ul>
</div>

运行效果见右侧结果窗口。

按钮和胶囊形导航设置徽章：

另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
   …
  <li><a href="#">Messages<span class="badge">3</span></a></li>
</ul>
<ul class="navnav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
  <span class="badge pull-right">42</span>
          Home
</a>
</li>
…
<li>
<a href="#">
    <span class="badge pull-right">3</span>
          Messages
</a>
</li>
</ul>
<button class="btnbtn-primary" type="button">
      Messages <span class="badge">4</span>
</button>

运行效果见右侧结果窗口。

样式代码请查看bootstrap.css文件第4345行～第4366行，这20多行代码已从原文中节取出来，放在右侧代码顶部“bootstrap.css”文件中，小伙伴们可以查看。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。