W tym artykule omówimy następujące perspektywy, aby zademonstrować użycie odznak Bootstrap:
- Jak korzystać z odznaki Bootstrap w celu uzyskania dodatkowych informacji?
- Jak korzystać z odznaki Bootstrap w celu uzyskania informacji kontekstowych?
- Jak dodać niestandardowe style do odznaki Bootstrap?
- Jak dodać ikony do odznaki Bootstrap?
- Jak połączyć odznakę Bootstrap z innym źródłem?
- Jak zaokrąglić odznaki?
- Jak używać odznaki Bootstrap jako licznika?
Czym są odznaki Bootstrap?
Odznaki to podstawowe elementy, które służą do wyświetlania wskaźnika. Na przykład mogą być używane jako licznik numeryczny do wyświetlania liczby powiadomień lub wiadomości:
Można je również wykorzystać do wyświetlenia dodatkowych informacji, takich jak na poniższym obrazku:
Jak korzystać z odznaki Bootstrap w celu uzyskania dodatkowych informacji?
Odznaki Bootstrap można dodawać do elementów HTML w celu wykorzystania jako dodatkowe informacje. Sprawdź przykład wymieniony poniżej dla demonstracji.
Przykład
Aby użyć odznaki Bootstrap w celu uzyskania dodatkowych informacji, najpierw:
- Dodać ' ' oraz ' ' elementy.
- Umieść '
” element z „ odznaka ' oraz ' odznaka-* zajęcia. Klasa „badge-*” odnosi się do plakietki o określonym kolorze:
< h6 > Stypendia < Zakres klasa = „odznaka odznaki-drugorzędna” > Nowy < / Zakres >< / h6 >
Można zauważyć, że do odpowiednich rubryk dodano dwie odznaki:
Jak korzystać z odznaki Bootstrap w celu uzyskania informacji kontekstowych?
Odznaki Bootstrap mogą być również używane do dostarczania informacji kontekstowych, takich jak „ niebezpieczeństwo odznaki ” wyświetla plakietkę w kolorze czerwonym i może służyć do wyświetlania niektórych nieudanych wiadomości, takich jak anulowanie, nieważność lub więcej. „ odznaka-sukces ” jest używany, gdy chcemy pokazać wiadomość o sukcesie.
Przykład
Spójrz na podany kod, aby zrozumieć omawiany scenariusz:
< Zakres klasa = „odznaka odznaka-niebezpieczeństwo” >Konto niezweryfikowane< / Zakres >< Zakres klasa = „informacje o plakietce” >to jest odznaka< / Zakres >
< Zakres klasa = „ostrzeżenie o plakietce” > Konto oczekujące dla zatwierdzenie< / Zakres >
< Zakres klasa = „odznaka odznaka-sukces” >Konto zweryfikowane< / Zakres >
Wyjście
Jak dodać niestandardowe style do odznaki Bootstrap?
Możesz także użyć CSS, aby dodać unikalny styl do odznak Bootstrap. Dla lepszego zrozumienia klasa o nazwie „ zwyczaj ” dodaje się w ramach „
< Zakres klasa = „niestandardowe informacje o plakietce” >To jest odznaka< / Zakres >
< Zakres klasa = „niestandardowe ostrzeżenie o plakietce” > Konto oczekujące dla zatwierdzenie< / Zakres >
< Zakres klasa = „odznaka odznaka-sukces niestandardowy” >Konto zweryfikowane< / Zakres >
Styl „niestandardowa” klasa
.zwyczaj {rozmiar czcionki : 18px ;
grubość czcionki : 100 ;
odstępy między literami : 1 piks ;
wyściółka : 8px 15 piks ;
}
„ .zwyczaj ” służy do uzyskiwania dostępu do „ zwyczaj ' klasa. Stosuje się do niego następujące właściwości:
- “ rozmiar czcionki ” dostosowuje rozmiar czcionki.
- “ grubość czcionki ” określa grubość czcionki.
- “ odstępy między literami ” dodaje odstęp między literami.
- “ wyściółka ” zapewnia przestrzeń wokół zawartości elementu.
Wyjście
Jak dodać ikony do odznaki Bootstrap?
Możemy również dodać różne ikony do odznak. Aby to zrobić, istnieje kilka klas, które można wykorzystać w tym celu. Aby uzyskać więcej informacji, odwiedź Czcionka niesamowita strona internetowa.
Przykład
W HTML dodaj „
< ja klasa = „daleki krąg czasów fa” >< / ja >
< / Zakres >
< Zakres klasa = „odznaka odznaka-sukces niestandardowy” > Konto zweryfikowane
< ja klasa = 'fas fa-user-check' >< / ja >
< / Zakres >
Wyjście
Jak połączyć odznakę Bootstrap z innym źródłem?
Aby umożliwić klikanie odznak Bootstrap, umieść „ odznaka ” klasy w kodzie HTML “ ” i podaj numer referencyjny połączonej strony w polu „ href ' atrybut:
< a href = '#' klasa = „odznaka odznaka-niebezpieczeństwo niestandardowa” >Anuluj< / a >< a href = '#' klasa = „niestandardowe informacje o plakietce” >Prześlij< / a >
Wyjście
Jak zaokrąglić odznaki?
Aby krawędzie znaczków były bardziej zaokrąglone, dodaj klasę „ odznaka-pigułka ”. Ta klasa obsługuje większe „ promień granicy ” i poziome” wyściółka ' nieruchomości:
< Zakres klasa = „odznaka odznaka pigułka odznaka niebezpieczeństwo niestandardowa” >Konto niezweryfikowane < / Zakres >< Zakres klasa = „odznaka-odznaka-pigułka-odznaka-ostrzeżenie niestandardowe' > Konto oczekujące dla zatwierdzenie< / Zakres >
< Zakres klasa = „odznaka odznaka-pigułka odznaka-sukces niestandardowy” >Konto zweryfikowane < / Zakres >
Wyjście
Jak używać odznaki Bootstrap jako licznika?
Aby utworzyć przycisk z licznikiem, dodaj kod HTML „
Powiadomienia < Zakres klasa = 'odznaka-światło' > 4 < / Zakres >
< / przycisk >
Wyjście
To było wszystko o odznakach Bootstrap i ich odpowiednich etykietach w Bootstrap.
Wniosek
Bootstrap „ odznaka ” służy do dodawania odznak do witryny. Na przykład klasy takie jak „ niebezpieczeństwo odznaki ”, „ informacje o odznace ”, i więcej, można użyć do dodania informacji kontekstowych do odznak jako ich etykiety. Niektóre klasy służą do dodawania ikon do odznak, na przykład „ daleki krąg czasów fa ”, aby umieścić ikonę przekreślonego koła. Ten post zawiera obszerny przewodnik po odznakach i etykietach Bootstrap.