Twitter Bootstrap 3.0 w jaki sposób mogę teraz „odznaczyć znaczek”

218

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

Piotr
źródło
1
Powinny one dostarczyć .danger, .successitd., Definicje stylów klasowych z pudełka dla ogólnych przypadków użycia takich jak ten.
Fr0zenFyr

Odpowiedzi:

256

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>

wprowadź opis zdjęcia tutaj

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>

wprowadź opis zdjęcia tutaj

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>

wprowadź opis zdjęcia tutaj


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>

wprowadź opis zdjęcia tutaj


11.04.2014 : Oto aktualizacja, dlaczego klasy alertów zapylania krzyżowego .badgenie są tak świetne. Myślę, że to zdjęcie podsumowuje:

wprowadź opis zdjęcia tutaj

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

broc.seib
źródło
3
to jest fajne, o ile nie chcesz używać odznak na listach grup, a potem się nie unoszą ... widzę to hamowanie z czasem, gdy zmienia się bootstrap. niezły hack.
nodrog
2
Tak, dobra uwaga @nodrog. list-groupZe badgesjest ładny out-of-the-box cechą startowej. Dla obserwujących wygląda to tak: getbootstrap.com/components/#list-group-badges
broc.seib
1
Nie przekonuje mnie argument „zapylenie krzyżowe”. Ponowne użycie i rekombinacja klas / atrybutów CSS odbywa się cały czas. Ukryty argument za tym terminem może być taki, że wolisz semantyczne nazwy klas css i podklas. Jest to w zasadzie „elastyczność / możliwość ponownego użycia i poprawność semantyczna”. Semantyczna nazwa klasy powinna wspierać rolę elementu. „etykieta jako znaczek” oznacza transformację elementu. - Sidenote: Odpowiedź jest w zasadzie moim komentarzem z 22 września z rozwiązaniem problemu „nie tak okrągłych krawędzi na etykietach” poprzez dodanie linii css.
Jens A. Koch,
3
Jeśli chcesz uzyskać specjalną listę grup, wystarczy ją dodać! .list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
Gausie,
2
Doskonała odpowiedź. Może również chcesz wrzucić tam padding, aby dopasować .badge w następujący sposób:.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Matt Borja
254

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

Jens A. Koch
źródło
4
Nie podobał mi się sposób, w jaki alert ozdabiał odznaki, dlatego zdecydowałem się na użycie etykiet. getbootstrap.com/components/#labels
Mike Purcell
6
To trochę hack-odpowiedź. Jasne, że to działa i jest proste. Ale powinieneś używać tych kontekstowych klas alertów z alertami. Być może w przyszłości zapisujesz się na łamane style. @ Odpowiedź JasonHuanga jest równie prosta i zapewnia większą kontrolę.
mikesigs
2
To, co skłoniło mnie do udzielenia powyższej odpowiedzi, to to, że Visual Studio Web Essentials wyświetla ostrzeżenie dla powyższego kodu. Mianowicie: „W przypadku użycia„ alarmu-zagrożenia ”należy również określić klasę„ alarmu ”.
mikesigs
3
Ludzie lądują na tej stronie, ponieważ ludzie bootstrap dokonali wielu rozważań projektowych, które wyrzucają rozważania projektowe, które robili wcześniej :) - Właśnie zrekombinowałem istniejące klasy css, aby zbliżyć się do poprzedniej „ważnej odznaki” . Oto rzeczy, które dają po wyjęciu z pudełka: to wszystko. Nie sądzę, że istnieje jeden prawdziwy sposób na tworzenie CSS. Ta strona oferuje wiele sposobów rozwiązania problemu. Ale proszę przestańcie krzyczeć „Aaah! Nie! To nie jest tak! Robisz coś złego”.
Jens A. Koch,
1
@ Jens-AndréKoch masz rację co do mojego „Aaah !! Nie !!”. Wygląda na to , że mówię ludziom, że „robisz to źle” i nie mam na to miejsca. Przepraszam.
broc.seib,
45

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;
}
Adams.H
źródło
25

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

Zim
źródło
20
Dlaczego się ich pozbyli?
Piotra,
4
+! Zastanawiam się także, dlaczego się ich pozbyli. Możesz użyć etykiety, ale nie jest ona odpowiednio ustawiona na pojemniku na pigułki. Przynajmniej nie jest wyśrodkowany pionowo.
cbmeeks
2
kulawy. migracja w górę z 2 na 3 jest całkowitym bólem.
Kevin
Odpowiedź Jensa-André Kocha to rozwiązanie tylko Bootstrap 3.0. Myślę, że to właściwa droga?
Josh Petitt
2
@Peter: Zobacz github.com/twbs/bootstrap/pull/6342 . TLDR: odznaki mają służyć jako „nieprzeczytane” liczniki i nie powinny być używane do przekazywania innych statusów.
Bobby Jack
20

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

clami219
źródło
18

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.

PowerKiKi
źródło
5

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

jumptiger13
źródło
2

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.

ThiefMaster
źródło
2

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:

Znaczek z ostrzeżeniem bg

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

Fr0zenFyr
źródło
myślę, że nie musisz przenosić .badge, jeśli umieściłeś label-xxxxx przed odznaką
Khaled AbuShqear