W wersji drugiej mogłem użyć

znaczek znaczek ważny

Widzę, że element .badge nie ma już klas kontekstowych (-success, -primary itp.).

Jak mogę osiągnąć to samo w wersji 3?

Na przykład. Chcę odznaki ostrzegawcze i ważne odznaki w moim interfejsie użytkownika

Po prostu dodaj tę jednoliniową klasę do swojego CSS i użyj labelkomponentu bootstrap .

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

Porównaj to labeli badgeobok siebie:

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

Wyglądają tak samo. Ale w CSS labelużywa, emwięc ładnie się skaluje i nadal ma wszystkie klasy „-color”. Tak więc etykieta lepiej skaluje się do większych rozmiarów czcionek i może być pokolorowana za pomocą sukcesu etykiety, ostrzeżenia etykiety itp. Oto dwa przykłady:

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

Lub gdzie rzeczy są większe:

<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 : Patrząc, jak to zrobimy w Bootstrap 4

Wygląda na to, że .badgezajęć już nie ma. Ale jest wbudowana .label-pillklasa (tutaj), która wygląda tak, jak chcemy.

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

W użyciu wygląda to tak:

<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 : Oto aktualizacja, dlaczego klasy alertów zapylania krzyżowego .badgenie są tak świetne. Myślę, że to zdjęcie podsumowuje:

Te klasy alarmowe nie zostały zaprojektowane tak, aby pasowały do ​​nich odznaki. Renderuje je z „wskazówką” zamierzonych kolorów, ale w końcu spójność jest wyrzucana przez okno, a czytelność jest wątpliwa. Te zhakowane czujnie odznaki nie są spójne wizualnie.

.label-as-badgeRoztwór wystaje tylko konstrukcję startowej. Utrzymujemy nienaruszone wszystkie decyzje podejmowane przez projektantów bootstrap, a mianowicie uwzględnienie czytelności i spójności wszystkich możliwych kolorów, a także samych wyborów kolorów. .label-as-badgeKlasa dodaje tylko zaokrąglone narożniki i nic innego. Nie wprowadzono definicji kolorów. Zatem pojedyncza linia CSS.

Tak, łatwiej jest po prostu zhakować i upuścić te .alert-xxxxxklasy - nie musisz dodawać żadnych linii CSS. Albo mógłby bardziej troszczą się o małe rzeczy i dodać jedną linię.

W skrócie: Zamień na badge-importantjeden alert-dangerlub progress-bar-danger.

Wygląda to tak: Bootply Demo .

Możesz połączyć klasę CSS badgez alert-*lub progess-bar-*pokolorować je:

Z 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

Alerty Docu: http://getbootstrap.com/components/#alerts

Z class="badges progress-bar-*"(zgodnie z sugestią @ clami219)

  <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

Pasek postępu: http://getbootstrap.com/components/#progress-alternatives

Bootstrap 3 usunął te opcje kolorów dla odznak. Możemy jednak dodać te style ręcznie. Oto moje rozwiązanie, a oto 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;
}

Klasy kontekstu dla badgesą rzeczywiście usunięte z Bootstrap 3, więc musisz dodać niestandardowy CSS, aby uzyskać taki sam efekt jak ...

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

Bootply

Innym możliwym sposobem, aby kolory były nieco bardziej intensywne, jest ten:

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

Zobacz Bootply

Jeśli używasz wersji SASS (np. Thomas-mcdonald's ), możesz chcieć być nieco bardziej dynamiczny (honorować istniejące zmienne) i tworzyć wszystkie konteksty znaczków przy użyciu tej samej techniki, co w przypadku etykiet:

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

Odpowiednik LESS powinien być prosty.

Podobnie jak powyższa odpowiedź, ale tutaj używa się nazw i kolorów bootstrap 3:

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

Korzystając z wersji LESS, możesz importować mixins.less i tworzyć własne klasy kolorowych odznak:

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

To samo dla innych kolorów; po prostu zamień ostrzeżenie na niebezpieczeństwo, sukces itp.

Cóż, to jest strasznie późna odpowiedź, ale myślę, że wciąż będę wrzucał moje dwa centy ... Mogłem zamieścić to jako komentarz, ponieważ ta odpowiedź zasadniczo nie dodaje żadnego nowego rozwiązania, ale dodaje wartość postowi jako kolejna alternatywa. Ale w komentarzu nie byłbym w stanie podać wszystkich szczegółów ze względu na limit znaków.

UWAGA: To wymaga edycji, aby załadować plik CSS - przenieś definicje stylów .badgepowyżej .label-default. Nie mogłem znaleźć żadnych praktycznych skutków ubocznych ze względu na zmianę w moich ograniczonych testach.

Chociaż rozwiązanie broc.seib jest prawdopodobnie najlepszym sposobem na osiągnięcie wymogu OP przy minimalnym dodatku do CSS, możliwe jest osiągnięcie tego samego efektu bez żadnego dodatkowego CSS w ogóle, podobnie jak rozwiązanie Jensa A. Kocha lub za pomocą .label-xxxklas kontekstowych, ponieważ są łatwe do zapamiętania w porównaniu do progress-bar-xxxklas. Nie sądzę, że .alert-xxxzajęcia dają taki sam efekt.

Wszystko, co musisz zrobić, to po prostu użyć .badgei .label-xxxklas razem (ale w tej kolejności). Nie zapomnij wprowadzić zmian wymienionych w UWAGA powyżej.

<a href="#">Inbox <span class="badge label-warning">42</span></a> wygląda tak:

WAŻNE: To rozwiązanie może popsuć twoje style, jeśli zdecydujesz się na aktualizację i zapomnisz wprowadzić zmiany w nowym lokalnym pliku CSS. Moim rozwiązaniem dla tego wyzwania było skopiowanie wszystkich .label-xxxstylów z mojego niestandardowego pliku CSS i załadowanie go po wszystkich innych plikach CSS. Takie podejście pomaga również, gdy używam CDN do ładowania BS3.

** PS: ** Obie najwyżej oceniane odpowiedzi mają swoje zalety i wady. To jest po prostu sposób, w jaki wolisz robić CSS, ponieważ nie ma „tylko właściwego sposobu”, aby to zrobić.