tutorial - Twitter Bootstrap 3.0現在我如何“重要徽章徽章”




href https stackpath bootstrapcdn com bootstrap 4.1 3 css bootstrap min css (6)

在版本二我可以使用

徽章徽章 - 重要

我發現.badge元素不再具有上下文(-success,-primary等)類。

我如何在版本3中實現同樣的功能?

例如。 我需要警告徽章和重要的徽章在我的用戶界面中


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;
}

badge的上下文類實際上已從Bootstrap 3中刪除,因此您必須添加一些自定義CSS來創建相同的效果,如...

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

Bootply


像上面的答案一樣,但是這裡使用引導程序3名稱和顏色:

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}


另一種可能的方法是,為了使顏色更強烈一些,是這樣的:

<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>

參見Bootply


如果使用SASS版本(例如: thomas-mcdonald的版本),那麼您可能希望稍微更具動態性(兌現現有變量),並使用與標籤相同的技術創建所有徽章上下文:

// 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等價物應該很簡單。


簡而言之:更換badge-important的是alert-dangerprogress-bar-danger

它看起來像這樣: Bootply Demo

您可以將CSS類badgealert-*progess-bar-*以給它們著色:

通過class="badges alert-*"

  <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

Alerts Docu: http://getbootstrap.com/components/#alerts : 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

Progress-Bar Docu: http://getbootstrap.com/components/#progress-alternatives : http://getbootstrap.com/components/#progress-alternatives





twitter-bootstrap-3