Odznaki na stronie internetowej są wykorzystywane do dostarczania użytkownikowi ważnych informacji, takich jak ostrzeżenie, liczba powiadomień, promocja określonego programu itp. Bootstrap 5 zapewnia określoną klasę, która pozwala tworzyć odznaki na swojej stronie internetowej. Oprócz ich stworzenia, inne klasy są również dostępne, aby stylizować odznaki. Ten blog prowadzi Cię, jak tworzyć i stylizować odznaki za pomocą Bootstrap 5.

Jak stworzyć odznakę

W celu utworzenia odznaki użyj .klasa odznaki wraz z klasą koloru tła .BG-Primary, .BG-SUCCCESS, .BG-Secondary, .BG-info, .Warning BG, .BG Danger, .BG Light, .BG-Dark.

Html

Kliknij tutaj Ważny

Kliknij tutaj Ważny

Aby utworzyć odznakę, element jest używany w ramach

I

element. Element został przypisany .klasa odznaki wraz z klasą koloru tła, .BG, aby nadać odznakę żółte tło. Zauważ, że odznaka domyślnie ma prostokątny kształt i skaluje się w górę i w dół, aby dopasować rozmiar elementu nadrzędnego, jeśli istnieje taki.

Wyjście

Odznaki z powyższego wyjścia służą do zwrócenia uwagi użytkowników.

Jak nadać kolorom koloru tła odznaki

Odznaki można zapewnić kolor tła za pomocą dowolnej klasy kolorów tła. Zajęcia te odgrywają ważną rolę w przekazywaniu znaczenia odznaki.

Html

Odznaka
Odznaka
Odznaka
Odznaka

Tutaj stworzyliśmy cztery odznaki i każdy z nich przypisano inną klasę kolorów tła.

Wyjście

Każda odznaka przekazuje inne znaczenie.

Jak tworzyć zaokrąglone odznaki

Jak już wspomniano, odznaki domyślnie mają prostokątny kształt, jednak jeśli chcesz nadać im zaokrąglony kształt, użyj .zaokrąglona paczka klasa.

Html

Odznaka
Odznaka
Odznaka
Odznaka

Powyższy kod wygeneruje cztery odznaki w kształcie pigułek, każdy o innym kolorze tła.

Wyjście

Odznaki pomyślnie otrzymały zaokrąglony kształt.

Jak stworzyć liczniki

Do wyświetlania liczby powiadomień o określonym elemencie można użyć liczników. Aby stworzyć takie odznaki, musisz zagnieżdżać element w tym konkretnym elemencie.

Html

Nieodebrane połączenie 8

Tutaj utworzyliśmy przycisk „Nieodprawy” o określonym stylu, a następnie zagnieżdżyliśmy element, który ma również określony styl i pokazuje liczbę nieodebranych połączeń, tym samym, wyświetlając liczbę powiadomień dla nieodebranych połączeń.

Wyjście

Powyższe wyjście pokazuje, że w sumie jest 8 nieodebranych połączeń.

Wniosek

W celu tworzenia i stylizacji odznaki za pomocą Bootstrap 5 Użyj .odznaka klasa wraz z jedną z klas kolorów tła .BG-Primary, .BG-SUCCCESS, .BG-Secondary, .BG-info, .Warning BG, .BG Danger, .BG Light, .BG-Dark Aby nadać im kolor tła. Ponadto odznaka domyślnie ma prostokątny kształt, jednak można je podać zaokrąglony kształt za pomocą .zaokrąglona paczka klasa. Ponadto tworzysz odznakę licznika powiadomienia, gniazdując odznakę wewnątrz elementu.