In Version zwei könnte ich verwenden

Abzeichen Abzeichen wichtig

Ich sehe, dass das .badge-Element keine kontextbezogenen Klassen (-success, -primary usw.) mehr hat.

Wie erreiche ich dasselbe in Version 3?

Z.B. Ich möchte Warnausweise und wichtige Ausweise in meiner Benutzeroberfläche

Fügen Sie einfach diese einzeilige Klasse in Ihr CSS ein und verwenden Sie die Bootstrap- labelKomponente.

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

Vergleichen Sie dies labelund badgenebeneinander:

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

Sie sehen gleich aus. Aber im CSS labelverwendet, emso dass es gut skaliert, und es hat immer noch alle "-color" -Klassen. Das Etikett lässt sich also besser auf größere Schriftgrößen skalieren und kann mit Etikettenerfolg, Etikettenwarnung usw. eingefärbt werden. Hier zwei Beispiele:

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

Oder wo die Dinge größer sind:

<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 : Sehen Sie sich an, wie wir dies in Bootstrap 4 tun

Sieht so aus, als wären die .badgeKlassen komplett weg. Aber es gibt eine eingebaute .label-pillKlasse (hier) , die so aussieht, wie wir es wollen.

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

Im Gebrauch sieht es so aus:

<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 : Hier ist ein Update, warum Cross-Pollinating- Alarmklassen mit .badgenicht so toll sind. Ich denke, dieses Bild fasst es zusammen:

Diese Alarmklassen waren nicht für Abzeichen konzipiert. Es gibt ihnen einen "Hinweis" auf die beabsichtigten Farben, aber am Ende wird die Konsistenz aus dem Fenster geworfen und die Lesbarkeit ist fraglich. Diese von Alarmen gehackten Abzeichen sind visuell nicht zusammenhängend.

Die .label-as-badgeLösung besteht nur darin, das Bootstrap-Design zu erweitern. Wir behalten alle Entscheidungen der Bootstrap-Designer bei, insbesondere die Berücksichtigung der Lesbarkeit und des Zusammenhalts aller möglichen Farben sowie die Farbauswahl selbst. Die .label-as-badgeKlasse fügt nur abgerundete Ecken hinzu und sonst nichts. Es wurden keine Farbdefinitionen eingeführt. Somit eine einzelne Zeile CSS.

Ja, ist es einfacher, nur hacken und in den Drop - .alert-xxxxxKlassen - Sie müssen nicht hinzufügen müssen , um alle Zeilen CSS. Oder man könnte mehr über die kleinen Dinge kümmern und eine Zeile hinzufügen.

Kurzum: Ersetzen Sie badge-importantdurch entweder alert-dangeroder progress-bar-danger.

Es sieht so aus: Bootply Demo .

Sie können die CSS-Klasse badgemit alert-*oder kombinieren, um sie einzufärben progess-bar-*:

Mit 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

Benachrichtigungsdokument: http://getbootstrap.com/components/#alerts

Mit class="badges progress-bar-*"(wie von @ clami219 vorgeschlagen)

  <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

Fortschrittsbalken-Dokument: http://getbootstrap.com/components/#progress-alternatives

Bootstrap 3 hat diese Farboptionen für Abzeichen entfernt. Wir können diese Stile jedoch manuell hinzufügen. Hier ist meine Lösung und hier ist der 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;
}

Die Kontextklassen für badgewerden tatsächlich aus Bootstrap 3 entfernt, sodass Sie benutzerdefiniertes CSS hinzufügen müssen, um den gleichen Effekt wie ...

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

Bootply

Ein anderer möglicher Weg, um die Farben etwas intensiver zu machen, ist dieser:

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

Siehe Bootply

Wenn Sie eine SASS-Version verwenden (z. B. die von thomas-mcdonald ), möchten Sie möglicherweise etwas dynamischer sein (vorhandene Variablen berücksichtigen ) und alle Badge-Kontexte mit derselben Technik erstellen, die für Labels verwendet wird:

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

Das WENIGER Äquivalent sollte einfach sein.

Wie die obige Antwort, aber hier werden Bootstrap 3-Namen und -Farben verwendet:

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

Wenn Sie die WENIGER-Version verwenden, können Sie mixins.less importieren und Ihre eigenen Klassen für farbige Abzeichen erstellen:

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

Gleiches gilt für die anderen Farben; Ersetzen Sie einfach die Warnung durch Gefahr, Erfolg usw.

Nun, dies ist eine furchtbar späte Antwort, aber ich denke, ich werde immer noch meine zwei Cent investieren ... Ich hätte dies als Kommentar posten können, da diese Antwort im Wesentlichen keine neue Lösung hinzufügt, aber einen Mehrwert für den Beitrag darstellt als noch eine Alternative. Aber in einem Kommentar könnte ich aufgrund der Zeichenbeschränkung nicht alle Details angeben.

HINWEIS: Dies erfordert eine Bearbeitung, um die CSS-Datei zu booten. Verschieben Sie die Stildefinitionen für .badgeoben .label-default. Konnte keine praktischen Nebenwirkungen aufgrund der Änderung in meinen begrenzten Tests finden.

Während die Lösung von broc.seib wahrscheinlich der beste Weg ist, um die OP-Anforderung mit minimalem Zusatz zu CSS zu erreichen, ist es möglich, den gleichen Effekt ohne zusätzliches CSS zu erzielen, genau wie die Lösung von Jens A. Koch oder durch Verwendung von .label-xxxKontextklassen, weil sie sind im Vergleich zu progress-bar-xxxKlassen leicht zu merken . Ich denke nicht, dass .alert-xxxKlassen den gleichen Effekt haben.

Alles, was Sie tun müssen, ist nur verwenden .badgeund .label-xxxKlassen zusammen (aber in dieser Reihenfolge). Vergessen Sie nicht, die in ANMERKUNG oben genannten Änderungen vorzunehmen.

<a href="#">Inbox <span class="badge label-warning">42</span></a> sieht aus wie das:

WICHTIG: Diese Lösung kann Ihre Stile beschädigen, wenn Sie sich für ein Upgrade entscheiden und vergessen, die Änderungen in Ihrer neuen lokalen CSS-Datei vorzunehmen. Meine Lösung für diese Herausforderung bestand darin, alle .label-xxxStile in meine benutzerdefinierte CSS-Datei zu kopieren und nach allen anderen CSS-Dateien zu laden. Dieser Ansatz hilft auch, wenn ich ein CDN zum Laden von BS3 verwende.

** PS: ** Beide am besten bewerteten Antworten haben ihre Vor- und Nachteile. Es ist genau die Art und Weise, wie Sie Ihr CSS bevorzugen, weil es keinen "nur richtigen Weg" gibt, dies zu tun.