4.11　徽章

源码文件：badges.less

CSS文件：bootstrap.css 4332行之后

在开发交互式系统或者信息系统时，经常要显示一些最新收到的消息、需要有多少审批的消息等。Bootstrap的.badge样式提供了很好的效果，只需要在span或者label上应用该样式即可。示例如下：

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

上述示例的运行效果如图4-61所示。

4.11　徽章 - 图1 图4-61　徽章运行效果

如下源码主要是设置具有圆角的背景椭圆框。

  1. // 源码4332行
  2. .badge {
  3.   display: inline-block;
  4.   /* 此处省略部分设置 */
  5.   vertical-align: baseline;
  6.   background-color: #999;       /* 背景色 */
  7.   border-radius: 10px;          /* 超大圆角 */
  8. }

另外，如果.badge样式应用的内部无内容时（例如：没有新消息），.badge样式会自动消失。示例和源码实现分别如下。

示例：

  1. <span class="badge"></span>

源码：

  1. // 源码4346行
  2. .badge:empty {
  3.   display: none;
  4. }

注意

由于IE8和以下版本不支持empty选择器，所以在这些浏览器下没有上述效果。

另外，badge样式在按钮元素button或list-group-item和nav-pills也可以有类似的样式，只是颜色稍有不同。示例如下。

  1. <ul class="nav nav-pills nav-stacked">
  2.   <li class="active">
  3.     <a href="#">
  4.       <span class="badge pull-right">42</span>
  5.       Home
  6.     </a>
  7.   </li>
  8.   ...
  9. </ul>

上述示例的运行效果如图4-62所示。

4.11　徽章 - 图2 图4-62　徽章在按钮及下拉菜单中的运行效果

徽章样式badge的源码如下：

  1. // 源码4349行
  2. .btn .badge {
  3.   position: relative;           /*在.btn样式里的元素上应用badge时，设置为相对定位*/
  4.   top: -1px;
  5. }
  6. a.badge:hover,
  7. a.badge:focus {                 /*在a链接上设置badge时，在hover和focus时的颜色设置*/
  8.   color: #ffffff;
  9.   text-decoration: none;
  10.   cursor: pointer;
  11. }
  12. a.list-group-item.active > .badge,
  13. .nav-pills > .active > a > .badge {
  14.   color: #428bca;                       /*将文本颜色和胶囊式按钮的背景色设为一致*/
  15.   background-color: #ffffff;    /*背景设为白色*/
  16. }
  17. .nav-pills > li > a > .badge {
  18.   margin-left: 3px;             /*设置左外边距*/
  19. }

.badge样式有个遗憾就是，它没有定义多风格颜色的设定。不过根据label样式的多颜色设置，我们可以很简单为.badge样式扩展类似的功能，使用方式也和label类似。扩展源码如下：

  1. .badge-danger {    background-color: #d9534f;}
  2. .badge-success {    background-color: #5cb85c;}
  3. .badge-warning {    background-color: #f0ad4e;}
  4. .badge-info {    background-color: #5bc0de;}

上述代码的运行效果如图4-63所示。

4.11　徽章 - 图3 图4-63　扩展后的彩色徽章

类似的，我们也可以为特殊元素内的badge定义特殊的字体颜色（而保持背景色不变）。扩展源码如下：

  1. .badge-content-default {    background-color: #fff;    color: #a7a9aa;}
  2. .badge-content-danger {    background-color: #fff;     color: #d9534f;}
  3. .badge-content-success {    background-color: #fff;    color: #5cb85c;}
  4. .badge-content-warning {    background-color: #fff;    color: #f0ad4e;}
  5. .badge-content-info {    background-color: #fff;    color: #5bc0de;}

上述代码的运行效果如图4-64所示。

4.11　徽章 - 图4 图4-64　扩展后的徽章在特殊字体时的颜色