另一种可能的方法，为了让颜色更强烈一点，是这样的:

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

看到bootp

徽章的上下文类确实从Bootstrap 3中删除了，所以你必须添加一些自定义CSS来创建相同的效果，如…

.badge-important{background-color:#b94a48;}

引导

就像上面的答案一样，但这里使用了3个名字和颜色:

/*css为徽章添加颜色，并使用颜色*/ .badge-default { background - color: # 999999; } .badge-primary { background - color: # 428 bca; } .badge-success { background - color: # 5 cb85c; } .badge-info { background - color: # 5 bc0de; } .badge-warning { background - color: # f0ad4e; } .badge-danger { background - color: # d9534f; }

简而言之:用警告-危险或进度条-危险替换徽章-重要。

它看起来像这样:Bootply Demo。

你可以将CSS类徽章与alert-*或progress -bar-*结合起来为它们着色:

与class="徽章警报-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

警报文档：http://getbootstrap.com/components/#alerts

用class="badges progress-bar-*"(根据@clami219的建议)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

进度条文档:http://getbootstrap.com/components/#progress-alternatives

如果使用SASS版本(例如:thomas-mcdonald's的版本)，那么你可能想要稍微更加动态(尊重现有变量)，并使用与标签相同的技术创建所有徽章上下文:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

LESS的对等物应该很简单。

Bootstrap 3删除了徽章的颜色选项。但是，我们可以手动添加这些样式。这是我的解决方案，这是JS Bin:

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}