推特引导3.0我如何“徽章徽章重要”现在

在第二个版本中我可以使用

徽章badge-important

我发现.badge元素不再有上下文类(-success，-primary，等等)。

我如何在版本3中实现同样的事情?

如。我想警告徽章和重要的徽章在我的UI

当前回答

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

它看起来像这样: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

2014-02-22 15:49:30

其他回答

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

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

引导

2013-09-11 01:51:43

如果使用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的对等物应该很简单。

2013-11-14 01:54:46

就像上面的答案一样，但这里使用了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; }

2015-09-10 22:50:44

当使用LESS版本时，你可以导入mixin。为彩色徽章创建自己的类:

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

其他颜色也一样;只要把警告换成危险、成功等。

2014-05-17 17:12:57