Twitter Bootstrap 3.0 Wie kann ich jetzt "Badge Badge-wichtig"?

218

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

Peter
quelle
1
Sie sollte zur Verfügung gestellt .danger, .successusw. Klasse Formatdefinitionen aus der Box für den allgemeinen Gebrauch Fällen wie diesem.
Fr0zenFyr

Antworten:

256

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>

Geben Sie hier die Bildbeschreibung ein

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>

Geben Sie hier die Bildbeschreibung ein

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>

Geben Sie hier die Bildbeschreibung ein


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>

Geben Sie hier die Bildbeschreibung ein


11/04/2014 : Hier ist ein Update, warum Cross-Pollinating- Alarmklassen mit .badgenicht so toll sind. Ich denke, dieses Bild fasst es zusammen:

Geben Sie hier die Bildbeschreibung ein

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.

broc.seib
quelle
3
Das ist cool, solange du keine Abzeichen in Gruppenlisten verwenden willst, dann schweben sie nicht ... Ich kann diese Bremsung im Laufe der Zeit sehen, wenn der Bootstrap geändert wird. Netter Hack.
Nodrog
2
Ja, guter Punkt @nodrog. Das list-groupwith badgesist eine nette Out-of-the-Box-Funktion im Bootstrap. Für die Zuschauer ist hier, wie das aussieht: getbootstrap.com/components/#list-group-badges
broc.seib
1
Ich bin nicht von dem Argument der "Fremdbestäubung" überzeugt. Die Wiederverwendung und Rekombination von CSS-Klassen / -Attributen erfolgt ständig. Das versteckte Argument hinter Ihrem Begriff könnte sein, dass Sie semantische CSS-Klassen- und Unterklassennamen bevorzugen. Es ist im Grunde "Flexibilität / Wiederverwendbarkeit und semantische Korrektheit". Ein semantischer Klassenname sollte die Rolle des Elements unterstützen. "label-as-badge" zeigt eine Elementtransformation an. - Nebenbemerkung: Die Antwort ist im Grunde mein Kommentar vom 22. September mit einer Lösung für das Problem "nicht so runde Kanten auf Etiketten" durch Hinzufügen einer CSS-Zeile.
Jens A. Koch
3
Wenn Sie die spezielle Listengruppe schweben lassen möchten, fügen Sie dies einfach hinzu! .list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
Gausie
2
Hervorragende Antwort. Vielleicht möchten Sie auch die Polsterung so einwerfen, dass sie mit .badge wie folgt übereinstimmt:.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Matt Borja
254

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

Jens A. Koch
quelle
4
Die Art und Weise, wie der Alarm die Abzeichen schmückte, gefiel mir nicht, daher entschied ich mich stattdessen für Etiketten. getbootstrap.com/components/#labels
Mike Purcell
6
Dies ist eine etwas hackige Antwort. Sicher funktioniert es und es ist einfach. Sie sollten diese kontextbezogenen Warnungsklassen jedoch mit Warnungen verwenden. Möglicherweise melden Sie sich in Zukunft für defekte Styles an. Die Antwort von @ JasonHuang ist genauso einfach und bietet Ihnen mehr Kontrolle.
Mikeigsigs
2
Was mich zu der obigen Antwort veranlasste, war, dass Visual Studio Web Essentials eine Warnung für den obigen Code anzeigt. "Wenn Sie 'alert-risk' verwenden, müssen Sie auch die Klasse 'alert' angeben."
Mikeigsigs
3
Die Leute landen auf dieser Seite, weil die Bootstrap-Leute viele Design-Überlegungen angestellt haben, die die Design-Überlegungen, die sie zuvor gemacht haben, wegwerfen :) - Ich habe nur vorhandene CSS-Klassen neu kombiniert, um mich dem früheren "Abzeichen wichtig" zu nähern. . Hier geht es mit dem Zeug, das sie sofort verwenden: das war's. Ich glaube nicht, dass es einen echten Weg gibt, CSS zu erstellen. Diese Seite bietet viele Möglichkeiten, um das Problem zu lösen. Aber bitte hör auf zu schreien "Aaah! Nein! Das ist nicht der Weg! Du machst etwas falsch".
Jens A. Koch
1
@ Jens-AndréKoch du hast recht mit meinem "Aaah !! Nein !!". Es hört sich so an, als würde ich den Leuten sagen, dass Sie es falsch machen, und ich habe keinen Ort, um das zu sagen. Es tut uns leid.
broc.seib
45

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;
}
Adams.H
quelle
25

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

Zim
quelle
20
Warum haben sie sie losgeworden?
Peter
4
+! Ich frage mich auch, warum sie sie losgeworden sind. Sie können ein Etikett verwenden, das jedoch auf einem Tablettenbehälter nicht richtig ausgerichtet ist. Zumindest ist es nicht vertikal zentriert.
cbmeeks
2
Lame. Die Aufwärtswanderung von 2 auf 3 ist ein völliger Schmerz.
Kevin
Die Antwort von Jens-André Koch ist eine reine Bootstrap 3.0-Lösung. Ich denke das ist der richtige Weg?
Josh Petitt
2
@ Peter: Siehe github.com/twbs/bootstrap/pull/6342 . TLDR: Ausweise sind als "ungelesene" Zähler gedacht und sollten nicht zur Übermittlung anderer Status verwendet werden.
Bobby Jack
20

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

clami219
quelle
18

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.

PowerKiKi
quelle
5

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

jumptiger13
quelle
2

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.

DiebMaster
quelle
2

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:

Abzeichen mit Warnung bg

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.

Fr0zenFyr
quelle
Ich denke, Sie müssen .badge nicht bewegen, wenn Sie label-xxxxx vor dem Abzeichen platziert haben
Khaled AbuShqear