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




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

簡而言之:更換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

在版本二我可以使用

徽章徽章 - 重要

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

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

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


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

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

Bootply


使用LESS版本時,您可以導入mixins.less並為彩色徽章創建自己的類:

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

其他顏色也一樣; 只是用危險,成功等替代警告。


如果使用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等價物應該很簡單。


像上面的答案一樣,但是這裡使用引導程序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;
}


那麼,這是一個非常晚的答案,但我認為我仍然會把我的兩分錢......我可以發表這個評論作為評論,因為這個答案本質上並不添加任何新的解決方案,但它確實增加了該帖子的價值作為另一種選擇。 但是在評論中,我不能因為字符限製而給出所有的細節。

注意:這需要編輯引導CSS文件 - 為.badge上面的.badge .label-default移動樣式定義。 由於有限測試的改變,找不到任何實際的副作用。

雖然broc.seib的解決方案可能是實現OP需求的最佳方法,只需添加很少的CSS,但可以像Jens A. Koch的解決方案或通過使用.label-xxx一樣獲得相同的效果,而無需任何額外的CSS上下文類,因為與progress-bar-xxx類相比,它們很容易記住。 我不認為.alert-xxx類會產生同樣的效果。

您只需使用.badge.badge .label-xxx類(但按此順序)即可。 不要忘記進行上面註釋中提到的更改。

<a href="#">Inbox <span class="badge label-warning">42</span></a>看起來像這樣:

重要提示:如果您決定升級並忘記在新的本地CSS文件中進行更改,此解決方案可能會破壞您的樣式。 我對這個挑戰的解決方案是將我自定義CSS文件中的所有.label-xxx樣式複制並加載到所有其他CSS文件之後。 當我使用CDN加載BS3時,這種方法也有幫助。

** PS:**最受好評的答案都有其優點和缺點。 這只是你喜歡做你的CSS的方式,因為沒有“唯一正確的方法”來做到這一點。


只需在CSS中添加此單行類,並使用引導label組件。

.label-as-badge {
    border-radius: 1em;
}

並肩比較這個labelbadge

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

它們看起來是一樣的。 但在CSS中, label使用em因此它可以很好地縮放,並且它仍然具有所有“-color”類。 因此,標籤可以更好地縮放到較大的字體大小,並且可以使用標籤成功,標籤警告等進行著色。以下是兩個示例:

<span class="label label-success label-as-badge">Yay! Rah!</span>

或者事情更大的地方:

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

11/16/2015 :看看我們如何在Bootstrap 4中做到這一點

看起來.badge類完全沒了。 但是有一個內置的.label-pill(here) ,看起來像我們想要的。

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

在使用中,它看起來像這樣:

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

11/04/2014 :這裡有一個關於為什麼使用.badge交叉授粉的警告類.badge的更新。 我認為這張照片總結了它:

那些警戒課並非設計用於帶有徽章。 它使用預期顏色的“提示”來呈現它們,但最終一致性被拋出窗外,可讀性是有問題的。 這些警報駭客徽章不具有視覺上的凝聚力。

.label-as-badge解決方案只是擴展了bootstrap設計。 我們保留完整的bootstrap設計師所做的所有決策,即他們為所有可能顏色的可讀性和內聚性以及顏色選擇本身所給予的考慮。 .label-as-badge類僅添加圓角,而沒有其他內容。 沒有介紹顏色定義。 因此,一行CSS。

是的,只需要修改那些.alert-xxxxx類就可以了 - 您不必添加任何 CSS代碼。 或者你可以關心更多的小事情,並添加一行。


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




twitter-bootstrap-3