İkinci versiyonda

rozet rozet önemli

.Badge öğesinin artık bağlamsal (-success, -primary vb.) Sınıfları olmadığını görüyorum.

Sürüm 3'te aynı şeyi nasıl başarabilirim?

Örneğin. Kullanıcı arayüzümde uyarı rozetleri ve önemli rozetler istiyorum

Bu tek satırlık sınıfı CSS'nize eklemeniz ve bootstrap labelbileşenini kullanmanız yeterlidir .

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

Bunu labelve badgeyan yana karşılaştırın :

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

Aynı görünüyorlar. Ama CSS'de, bu yüzden güzel ölçeklendirir labelkullanır emve hala tüm "-color" sınıflarına sahiptir. Böylece etiket daha büyük yazı tipi boyutlarına daha iyi ölçeklenir ve etiket başarısı, etiket uyarısı vb. İle renklendirilebilir. İşte iki örnek:

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

Veya işlerin daha büyük olduğu yerlerde:

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

16.11.2015 : Bootstrap 4'te bunu nasıl yapacağımıza bakmak

.badgeSınıflar tamamen bitmiş gibi görünüyor . Ama istediğimiz gibi görünen yerleşik bir .label-pillsınıf (burada) var.

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

Kullanımda şöyle görünür:

<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 : Çapraz tozlaşma uyarı sınıflarının neden .badgebu kadar büyük olmadığına dair bir güncelleme . Bence bu resim özetliyor:

Bu uyarı sınıfları rozetlerle birlikte tasarlanmamıştı. Onları amaçlanan renklerin bir “ipucu” haline getirir, ancak sonunda tutarlılık pencereden dışarı atılır ve okunabilirlik sorgulanabilir. Bu saldırıya uğramış rozetler görsel olarak uyumlu değildir.

.label-as-badgeÇözelti, sadece önyükleme tasarımı genişletmektedir. Bootstrap tasarımcıları tarafından verilen tüm kararları, yani olası tüm renklerde okunabilirlik ve uyum için verdikleri dikkate ve renk seçimlerinin sağlamlığını koruyoruz. .label-as-badgeSınıf yalnızca yuvarlatılmış köşeler, ve başka bir şey ekler. Tanıtılan renk tanımı yok. Böylece, tek bir CSS hattı.

Evet, sadece bu .alert-xxxxxsınıfları kesmek ve bırakmak daha kolaydır - herhangi bir CSS satırı eklemenize gerek yoktur . Ya da küçük şeyler hakkında daha fazla önem verebilir ve bir satır ekleyebilirsiniz.

Kısaca: veya badge-importantile değiştirin .alert-dangerprogress-bar-danger

Şöyle görünüyor: Bootply Demo .

Sen CSS sınıfı birleştirmek olabilir badgeile alert-*veya progess-bar-*renk onlara:

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

Uyarılar Docu: http://getbootstrap.com/components/#alerts

İle class="badges progress-bar-*"(@ clami219 tarafından önerildiği gibi)

  <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

İlerleme Çubuğu Docu: http://getbootstrap.com/components/#progress-alternative

Bootstrap 3 rozetler için bu renk seçeneklerini kaldırdı. Ancak, bu stilleri manuel olarak ekleyebiliriz. İşte benim çözümüm ve işte 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;
}

İçin bağlam sınıfları badgegerçekten Bootstrap 3'ten kaldırılır, bu nedenle aynı efekti oluşturmak için bazı özel CSS eklemeniz gerekir ...

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

Bootply

Renkleri biraz daha yoğun hale getirmenin bir başka olası yolu şudur:

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

Bkz .

Bir SASS sürümü kullanıyorsanız (örneğin: thomas-mcdonald'ın sürümü ), biraz daha dinamik olmak (mevcut değişkenleri onurlandırmak) ve etiketler için kullanılanla aynı tekniği kullanarak tüm rozet bağlamlarını oluşturmak isteyebilirsiniz:

// 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 eşdeğeri basit olmalıdır.

Yukarıdaki cevap gibi ama burada bootstrap 3 adları ve renkleri kullanıyor:

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

LESS sürümünü kullanırken mixins.less dosyasını içe aktarabilir ve renkli rozetler için kendi sınıflarınızı oluşturabilirsiniz:

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

Diğer renkler için aynı; uyarıyı tehlike, başarı vb. ile değiştirin.

Bu çok geç bir cevap ama yine de iki sentimi koyacağımı düşünüyorum ... Bunu bir yorum olarak gönderebilirim, çünkü bu cevap aslında yeni bir çözüm eklemiyor, ancak yazıya değer katıyor başka bir alternatif olarak. Ancak bir yorumda karakter sınırı nedeniyle tüm ayrıntıları veremezdim.

NOT: Bu, CSS dosyasını önyüklemek için bir düzenlemeye ihtiyaç duyar - .badgeyukarıdaki stil tanımlarını taşıma.label-default . Sınırlı testlerimdeki değişiklik nedeniyle herhangi bir pratik yan etki bulunamadı.

İken broc.seib çözümü CSS minimal eklenmesiyle OP şartı ulaşmanın en iyi yolu muhtemelen, gibi hiç bir ekstra CSS olmadan aynı etkiyi elde etmek mümkündür Jens A. Koch'un çözümü kullanarak veya .label-xxxbağlamsal sınıfları çünkü onlar progress-bar-xxxsınıflara göre hatırlanması kolaydır . .alert-xxxSınıfların aynı etkiyi yarattığını sanmıyorum .

Yapmanız gereken tek şey sadece kullanımını olduğunu .badgeve .label-xxxbirlikte sınıfları (ancak bu sırayla). Yukarıdaki NOT'da belirtilen değişiklikleri yapmayı unutmayın.

<a href="#">Inbox <span class="badge label-warning">42</span></a> buna benzer:

ÖNEMLİ: Yükseltmeye karar verirseniz ve yeni yerel CSS dosyanızda değişiklik yapmayı unutursanız, bu çözüm stillerinizi bozabilir. Bu soruna yönelik çözümüm, .label-xxxözel CSS dosyamdaki tüm stilleri kopyalayıp diğer tüm CSS dosyalarından sonra yüklemekti. Bu yaklaşım, BS3'ü yüklemek için bir CDN kullandığımda da yardımcı olur.

** Not: ** Hem en yüksek puanlı cevapların artıları ve eksileri vardır. Bu sadece CSS'nizi yapmayı tercih ettiğiniz yoldur çünkü bunu yapmak için "tek doğru yol" yoktur.