it-swarm.com.de

Twitter Bootstrap 3.0 Wie kann ich jetzt "Abzeichen wichtig"

In Version zwei könnte ich verwenden

abzeichen abzeichen-wichtig

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

Wie erreiche ich dasselbe in Version 3?

Z.B. Ich möchte Warnschilder und wichtige Schilder in meiner Benutzeroberfläche

216
Peter

Fügen Sie einfach diese einzeilige Klasse in Ihr CSS ein und verwenden Sie die Komponente bootstrap label.

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

Vergleichen Sie diese label und badge nebeneinander:

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

enter image description here

Sie sehen gleich aus. Aber in der CSS verwendet labelem, so dass es gut skaliert und immer noch alle "-color" -Klassen enthält. So wird das Etikett besser auf größere Schriftgrößen skaliert und kann mit Etikettenerfolg, Etikettenwarnung usw. eingefärbt werden. Hier zwei Beispiele:

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

enter image description here

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>

enter image description here


16.11.2015 : Wie wir das machen, sehen wir in Bootstrap 4

Sieht aus wie .badge Klassen sind komplett weg. Aber es gibt ein eingebautes .label-pill class (hier) das sieht so aus, wie wir es wollen.

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

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

enter image description here


11/04/2014 : Hier ist ein Update, warum Warnklassen mit .badge ist nicht so toll. Ich denke, dieses Bild bringt es auf den Punkt:

enter image description here

Diese Alarmklassen waren nicht für Abzeichen ausgelegt. Es rendert sie mit einem "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 kohärent.

Das .label-as-badge Die Lösung erweitert nur das bootstrap Design. Wir behalten die gesamte Entscheidungsfindung der bootstrap Designer im Auge, nämlich die Berücksichtigung der Lesbarkeit und Zusammenhalt über alle möglichen Farben, sowie die Farbauswahl selbst. Die .label-as-badge Klasse fügt nur abgerundete Ecken und nichts anderes hinzu. Es wurden keine Farbdefinitionen eingeführt. Also eine einzige Zeile CSS.

Ja, es ist einfacher, einfach wegzuhacken und diese .alert-xxxxx classes - Sie müssen keine any CSS-Zeilen hinzufügen. Oder Sie könnten kümmern sich mehr um die kleinen Dinge und fügen eine Zeile hinzu.

252
broc.seib

Kurz gesagt: Ersetzen Sie badge-important Durch alert-danger Oder progress-bar-danger.

Es sieht so aus: Bootply Demo.


Sie können die CSS-Klasse badge mit alert-* Oder progess-bar-* Kombinieren, um sie einzufärben:

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

Alerts Docu: 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

Fortschrittsanzeige Doku: http://getbootstrap.com/components/#progress-alternatives

252
Jens A. Koch

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 das 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;
}
44
Adams.H

Die Kontextklassen für badge wurden in der Tat aus Bootstrap 3) entfernt, sodass Sie benutzerdefiniertes CSS hinzufügen müssen, um den gleichen Effekt zu erzielen wie ...

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

Bootply

25
Zim

Ein anderer möglicher Weg, um die Farben ein bisschen 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

20
clami219

Wenn Sie eine SASS-Version verwenden (zB: thomas-mcdonalds eine ), möchten Sie möglicherweise etwas dynamischer sein (vorhandene Variablen berücksichtigen) und alle Ausweiskontexte mit der gleichen Technik wie für Etiketten erstellen:

// 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 Äquivalent WENIGER sollte einfach sein.

18
PowerKiKi

Wie die Antwort oben, 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;
}
5
jumptiger13

Wenn Sie die LESS-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.

2
ThiefMaster

Nun, dies ist eine schrecklich späte Antwort, aber ich denke, ich werde immer noch meine zwei Cent einbringen ... Ich hätte dies als Kommentar posten können, weil diese Antwort im Grunde keine neue Lösung hinzufügt, aber dem Beitrag einen Mehrwert verleiht als noch eine alternative. Aber in einem Kommentar könnte ich wegen der Zeichenbeschränkung nicht alle Details angeben.

HINWEIS: Dies erfordert eine Bearbeitung, um bootstrap CSS-Datei - Verschieben von Stildefinitionen für .badge Über .label-default. Konnte nicht Finden Sie alle praktischen Nebenwirkungen aufgrund der Änderung in meinen begrenzten Tests.

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

Sie müssen nur die Klassen .badge Und .label-xxx Zusammen verwenden (aber in dieser Reihenfolge). Vergessen Sie nicht, die in HINWEIS oben genannten Änderungen vorzunehmen.

<a href="#">Inbox <span class="badge label-warning">42</span></a> Sieht so aus:

Badge with warning bg

WICHTIG: Diese Lösung kann Ihre Stile beschädigen, wenn Sie ein Upgrade durchführen 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.

** P.S: ** Beide bestbewerteten Antworten haben ihre Vor- und Nachteile. Es ist nur die Art und Weise, wie Sie Ihr CSS bevorzugen, weil es keine "nur richtige" Art und Weise gibt, dies zu tun.

2
Fr0zenFyr