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
.danger
,.success
usw. Klasse Formatdefinitionen aus der Box für den allgemeinen Gebrauch Fällen wie diesem.Antworten:
Fügen Sie einfach diese einzeilige Klasse in Ihr CSS ein und verwenden Sie die Bootstrap-
label
Komponente.Vergleichen Sie dies
label
undbadge
nebeneinander:Sie sehen gleich aus. Aber im CSS
label
verwendet,em
so 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:Oder wo die Dinge größer sind:
16.11.2015 : Sehen Sie sich an, wie wir dies in Bootstrap 4 tun
Sieht so aus, als wären die
.badge
Klassen komplett weg. Aber es gibt eine eingebaute.label-pill
Klasse (hier) , die so aussieht, wie wir es wollen.Im Gebrauch sieht es so aus:
11/04/2014 : Hier ist ein Update, warum Cross-Pollinating- Alarmklassen mit
.badge
nicht 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-badge
Lö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-badge
Klasse 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-xxxxx
Klassen - 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.quelle
list-group
withbadges
ist eine nette Out-of-the-Box-Funktion im Bootstrap. Für die Zuschauer ist hier, wie das aussieht: getbootstrap.com/components/#list-group-badges.list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Kurzum: Ersetzen Sie
badge-important
durch entwederalert-danger
oderprogress-bar-danger
.Es sieht so aus: Bootply Demo .
Sie können die CSS-Klasse
badge
mitalert-*
oder kombinieren, um sie einzufärbenprogess-bar-*
:Mit
class="badges alert-*"
Benachrichtigungsdokument: http://getbootstrap.com/components/#alerts
Mit
class="badges progress-bar-*"
(wie von @ clami219 vorgeschlagen)Fortschrittsbalken-Dokument: http://getbootstrap.com/components/#progress-alternatives
quelle
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 :
quelle
Die Kontextklassen für
badge
werden tatsächlich aus Bootstrap 3 entfernt, sodass Sie benutzerdefiniertes CSS hinzufügen müssen, um den gleichen Effekt wie ...Bootply
quelle
Ein anderer möglicher Weg, um die Farben etwas intensiver zu machen, ist dieser:
Siehe Bootply
quelle
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:
Das WENIGER Äquivalent sollte einfach sein.
quelle
Wie die obige Antwort, aber hier werden Bootstrap 3-Namen und -Farben verwendet:
quelle
Wenn Sie die WENIGER-Version verwenden, können Sie mixins.less importieren und Ihre eigenen Klassen für farbige Abzeichen erstellen:
Gleiches gilt für die anderen Farben; Ersetzen Sie einfach die Warnung durch Gefahr, Erfolg usw.
quelle
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
.badge
oben.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-xxx
Kontextklassen, weil sie sind im Vergleich zuprogress-bar-xxx
Klassen leicht zu merken . Ich denke nicht, dass.alert-xxx
Klassen den gleichen Effekt haben.Alles, was Sie tun müssen, ist nur verwenden
.badge
und.label-xxx
Klassen 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-xxx
Stile 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.
quelle