Bootstrap | Odznaki i etykiety

Odznaki witryny są zwykle małą grafiką w dowolnej aplikacji. Odznaki są również znane jako przyciski witryny powiązane z inną witryną lub używane w określonym celu. W Bootstrap 3 istniała osobna klasa dla etykiet, ale ponieważ używamy Bootstrap 4, klasa etykiet została zastąpiona „odznaka" klasa.

W tym artykule obejmie następujące perspektywy, aby zademonstrować użycie odznaki bootstrap:

• Jak korzystać z odznaki bootstrap, aby uzyskać dodatkowe informacje?
• Jak używać odznaki bootstrap do 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 zrobić odznaki zaokrąglone?
• Jak używać odznaki bootstrap jako licznika?

Co to są odznaki bootstrap?

Odznaki to podstawowe elementy używane do pokazania wskaźnika. Na przykład mogą być używane jako licznik numeryczny do pokazania liczby powiadomień lub wiadomości:

Można je również wykorzystać do wyświetlania dodatkowych informacji, takich jak pokazane na podanym obrazie:

Jak korzystać z odznaki bootstrap, aby uzyskać dodatkowe informacje?

Odznaki bootstrap można dodać w elementach HTML do wykorzystania jako dodatkowe informacje. Sprawdź przykład wspomniany poniżej dla demonstracji.

Przykład

Aby użyć odznaki Bootstrap w celu dodania informacji, po pierwsze:

• Dodać "

  " I "

  " elementy.

• Umieść "„Element z„odznaka" I "odznaka-*„Zajęcia. Klasa „odznaki-*” odnosi się do odznaki o określonym kolorze:

WydarzeniaNowy

Stypendia Nowy

Można zauważyć, że do odpowiednich nagłówków dodawane są dwa odznaki:

Jak używać odznaki bootstrap do informacji kontekstowych?

Odznaki bootstrap można również wykorzystać do dostarczania informacji kontekstowych, takich jak „Niebezpieczeństwo”Wyświetla odznakę w kolorze czerwonym i może być używany do pokazania niektórych nieudanych wiadomości, takich jak Anuluj, nieprawidłowe lub więcej. „„Odzwierciedlenie”Jest używany tam, gdzie chcemy pokazać wiadomość o sukcesie.

Przykład

Spójrz na dany kod, aby zrozumieć omawiany scenariusz:

Konto nie jest zweryfikowane
To jest odznaka
Konto w oczekiwaniu na zatwierdzenie
Konto zweryfikowane

Wyjście

Jak dodać niestandardowe style do odznaki bootstrap?

Możesz także użyć CSS, aby dodać unikalną stylistykę do odznaki bootstrap. Dla lepszego zrozumienia klasa o nazwie „zwyczaj”Jest dodawany w ramach„" element. Następnie stosowane są następujące właściwości:

Konto nie jest zweryfikowane
To jest odznaka
Konto w oczekiwaniu na zatwierdzenie
Konto zweryfikowane

Stylowa klasa „niestandardowa”

.zwyczaj
Rozmiar czcionki: 18px;
czcionek: 100;
Spacer z literami: 1px;
Wyściółka: 8px 15px;

„„.zwyczaj”Służy do dostępu do„zwyczaj" klasa. Zastosowane są do niego następujące właściwości:

• "rozmiar czcionki”Dostosowuje rozmiar czcionki.
• "grubość czcionki”Stwierdza grubość czcionki.
• "odstępy między literami”Dodaje przestrzeń między literami.
• "wyściółka”Zapewnia przestrzeń wokół treści elementu.

Wyjście

Jak dodać ikony do odznaki bootstrap?

Możemy również dodać różne ikony do odznaki. Aby to zrobić, istnieje kilka klas, które można wykorzystać w tej sprawie. Aby uzyskać więcej informacji, odwiedź witrynę Font Awesome.

Przykład

W HTML dodaj „" element. W tym elemencie umieść element wbudowany „”Lub„ ”, aby wstawić klasę ikon:

Konto nie jest zweryfikowane


Konto zweryfikowane

Wyjście

Jak połączyć odznakę bootstrap z innym źródłem?

Aby odznaki bootstrap klikną, umieść „odznaka„Klasy w HTML””Tag i podaj odniesienie ze strony Linked w„Href" atrybut:

Anulować
Składać

Wyjście

Jak zrobić odznaki zaokrąglone?

Aby krawędzie odznaki były bardziej zaokrąglone, dodaj klasę „Piżla odznaki". Ta klasa obsługuje większy „Radiusz graniczny”I poziome”wyściółka" nieruchomości:

Konto nie jest zweryfikowane
Konto w oczekiwaniu na zatwierdzenie
Konto zweryfikowane

Wyjście

Jak używać odznaki bootstrap jako licznika?

Aby utworzyć przycisk z licznikiem, dodaj HTML ””Tag z typem„przycisk”I przypisz go klasy przycisków„Btn" I "BTN-Success". Następnie uwzględnij „„Element do umieszczenia licznika:

Powiadomienia 4

Wyjście

To chodziło o odznaki bootstrap i ich odpowiednich etykiet w bootstrapie.

Wniosek

Bootstrap „odznaka„Klasa jest wykorzystywana do dodawania odznak do strony internetowej. Na przykład zajęcia takie jak „Niebezpieczeństwo”,„Odznaka-info”, A więcej można wykorzystać do dodawania informacji kontekstowych do odznak jako ich etykiety. Niektóre zajęcia są stosowane w celu dodania ikon do odznak, takich jak „Far FA-Times Circle”Aby umieścić ikonę krzyżową. Ten post zawierał kompleksowy przewodnik na temat odznak i etykiet Bootstrap.