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
.danger
,.success
itd., Definicje stylów klasowych z pudełka dla ogólnych przypadków użycia takich jak ten.Odpowiedzi:
Po prostu dodaj tę jednoliniową klasę do swojego CSS i użyj
label
komponentu bootstrap .Porównaj to
label
ibadge
obok siebie:Wyglądają tak samo. Ale w CSS
label
używa,em
wię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:Lub gdzie rzeczy są większe:
16.11.2015 : Patrząc, jak to zrobimy w Bootstrap 4
Wygląda na to, że
.badge
zajęć już nie ma. Ale jest wbudowana.label-pill
klasa (tutaj), która wygląda tak, jak chcemy.W użyciu wygląda to tak:
11.04.2014 : Oto aktualizacja, dlaczego klasy alertów zapylania krzyżowego
.badge
nie 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-badge
Roztwó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-badge
Klasa 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-xxxxx
klasy - nie musisz dodawać żadnych linii CSS. Albo mógłby bardziej troszczą się o małe rzeczy i dodać jedną linię.źródło
list-group
Zebadges
jest ładny out-of-the-box cechą startowej. Dla obserwujących wygląda to tak: 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; }
W skrócie: Zamień na
badge-important
jedenalert-danger
lubprogress-bar-danger
.Wygląda to tak: Bootply Demo .
Możesz połączyć klasę CSS
badge
zalert-*
lubprogess-bar-*
pokolorować je:Z
class="badges alert-*"
Alerty Docu: http://getbootstrap.com/components/#alerts
Z
class="badges progress-bar-*"
(zgodnie z sugestią @ clami219)Pasek postępu: http://getbootstrap.com/components/#progress-alternatives
źródło
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 :
źródło
Klasy kontekstu dla
badge
są rzeczywiście usunięte z Bootstrap 3, więc musisz dodać niestandardowy CSS, aby uzyskać taki sam efekt jak ...Bootply
źródło
Innym możliwym sposobem, aby kolory były nieco bardziej intensywne, jest ten:
Zobacz Bootply
źródło
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:
Odpowiednik LESS powinien być prosty.
źródło
Podobnie jak powyższa odpowiedź, ale tutaj używa się nazw i kolorów bootstrap 3:
źródło
Korzystając z wersji LESS, możesz importować mixins.less i tworzyć własne klasy kolorowych odznak:
To samo dla innych kolorów; po prostu zamień ostrzeżenie na niebezpieczeństwo, sukces itp.
źródło
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
.badge
powyż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-xxx
klas kontekstowych, ponieważ są łatwe do zapamiętania w porównaniu doprogress-bar-xxx
klas. Nie sądzę, że.alert-xxx
zajęcia dają taki sam efekt.Wszystko, co musisz zrobić, to po prostu użyć
.badge
i.label-xxx
klas 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-xxx
styló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ć.
źródło