在第二个版本中我可以使用
徽章badge-important
我发现.badge元素不再有上下文类(-success，-primary，等等)。
我如何在版本3中实现同样的事情?
如。我想警告徽章和重要的徽章在我的UI
当前回答
徽章的上下文类确实从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; }
如果使用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的对等物应该很简单。
简而言之:用警告-危险或进度条-危险替换徽章-重要。
它看起来像这样: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
另一种可能的方法，为了让颜色更强烈一点，是这样的:
<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;}
引导
