Dieser Artikel behandelt die folgenden Perspektiven, um die Verwendung von Bootstrap-Abzeichen zu demonstrieren:
- Wie verwende ich das Bootstrap-Abzeichen für zusätzliche Informationen?
- Wie verwendet man das Bootstrap-Badge für kontextbezogene Informationen?
- Wie füge ich benutzerdefinierte Stile zum Bootstrap-Abzeichen hinzu?
- Wie füge ich Symbole zum Bootstrap-Abzeichen hinzu?
- Wie verknüpfe ich das Bootstrap-Abzeichen mit einer anderen Quelle?
- Wie werden Abzeichen abgerundet?
- Wie verwendet man das Bootstrap-Abzeichen als Zähler?
Was sind Bootstrap-Abzeichen?
Abzeichen sind die grundlegenden Komponenten, die verwendet werden, um einen Indikator anzuzeigen. Sie können beispielsweise als numerischer Zähler verwendet werden, um die Anzahl der Benachrichtigungen oder Nachrichten anzuzeigen:
Sie können auch verwendet werden, um zusätzliche Informationen anzuzeigen, wie im angegebenen Bild gezeigt:
Wie verwende ich das Bootstrap-Abzeichen für zusätzliche Informationen?
Bootstrap-Badges können innerhalb der HTML-Elemente hinzugefügt werden, um sie als zusätzliche Informationen zu verwenden. Schauen Sie sich das unten erwähnte Beispiel für die Demonstration an.
Beispiel
Um das Bootstrap-Abzeichen für zusätzliche Informationen zu verwenden, gehen Sie zunächst wie folgt vor:
- Hinzufügen ' ' und ' „Elemente.
- Setze das ' ”-Element mit dem “ Abzeichen ' und ' Abzeichen-* ' Klassen. Die Klasse „badge-*“ bezieht sich auf das Badge mit der angegebenen Farbe:
< h6 > Stipendien < Spanne Klasse = 'Abzeichen Abzeichen-sekundär' > Neu < / Spanne >< / h6 >
Es ist zu beobachten, dass den entsprechenden Überschriften zwei Abzeichen hinzugefügt werden:
Wie verwendet man das Bootstrap-Badge für kontextbezogene Informationen?
Bootstrap-Badges können auch verwendet werden, um kontextbezogene Informationen wie „ Abzeichen-Gefahr “ zeigt das Abzeichen in roter Farbe an und kann verwendet werden, um einige fehlgeschlagene Nachrichten wie „Abbrechen“, „Ungültig“ oder mehr anzuzeigen. Die ' Abzeichen-Erfolg “ wird verwendet, wenn wir eine Erfolgsmeldung anzeigen möchten.
Beispiel
Sehen Sie sich den angegebenen Code an, um das besprochene Szenario zu verstehen:
< Spanne Klasse = 'Abzeichen Abzeichen-Gefahr' >Konto nicht verifiziert< / Spanne >< Spanne Klasse = 'Abzeichen Abzeichen-Info' >das ist Abzeichen< / Spanne >
< Spanne Klasse = 'Abzeichen Abzeichen-Warnung' >Konto ausstehend Pro Zustimmung< / Spanne >
< Spanne Klasse = 'Abzeichen Abzeichen-Erfolg' >Konto verifiziert< / Spanne >
Ausgabe
Wie füge ich benutzerdefinierte Stile zum Bootstrap-Abzeichen hinzu?
Sie können auch CSS verwenden, um den Bootstrap-Abzeichen ein einzigartiges Design hinzuzufügen. Zum besseren Verständnis ist eine Klasse mit dem Namen „ Benutzerdefiniert “ wird innerhalb des „ ' Element. Dann werden die folgenden Eigenschaften angewendet:
< Spanne Klasse = 'Abzeichen Abzeichen-Gefahr benutzerdefinierte' >Konto nicht verifiziert < / Spanne >< Spanne Klasse = 'badge badge-info benutzerdefiniert' >Das ist Abzeichen< / Spanne >
< Spanne Klasse = 'badge badge-warning custom' >Konto ausstehend Pro Zustimmung< / Spanne >
< Spanne Klasse = 'Abzeichen Abzeichen-Erfolg benutzerdefinierte' >Konto verifiziert< / Spanne >
Stil 'benutzerdefinierte' Klasse
.Benutzerdefiniert {Schriftgröße : 18px ;
Schriftstärke : 100 ;
Buchstaben-Abstand : 1px ;
Polsterung : 8px 15px ;
}
Die ' .Benutzerdefiniert “ wird verwendet, um auf die „ Benutzerdefiniert ' Klasse. Darauf werden folgende Eigenschaften angewendet:
- „ Schriftgröße “ passt die Schriftgröße an.
- „ Schriftstärke “ gibt die Dicke der Schrift an.
- „ Buchstaben-Abstand “ fügt Leerzeichen zwischen den Buchstaben hinzu.
- „ Polsterung “ bietet Platz um den Inhalt des Elements.
Ausgabe
Wie füge ich Symbole zum Bootstrap-Abzeichen hinzu?
Wir können den Abzeichen auch verschiedene Symbole hinzufügen. Dazu gibt es mehrere Klassen, die für diesen Zweck verwendet werden können. Weitere Informationen finden Sie unter Schriftart genial Webseite.
Beispiel
Fügen Sie in HTML ein „ ' Element. Platzieren Sie innerhalb dieses Elements das Inline-Element „ “ oder „“, um die Icon-Klasse einzufügen:
< Spanne Klasse = 'Abzeichen Abzeichen-Gefahr benutzerdefinierte' > Konto nicht verifiziert< ich Klasse = 'Ferner Fa-Zeiten-Kreis' >< / ich >
< / Spanne >
< Spanne Klasse = 'Abzeichen Abzeichen-Erfolg benutzerdefinierte' > Konto verifiziert
< ich Klasse = 'fas fa-user-check' >< / ich >
< / Spanne >
Ausgabe
Wie verknüpfe ich das Bootstrap-Abzeichen mit einer anderen Quelle?
Um die Bootstrap-Badges anklickbar zu machen, platzieren Sie das „ Abzeichen „Klassen innerhalb des HTML“ “-Tag und geben Sie die Referenz der verlinkten Seite im „ href ” Attribut:
< a href = '#' Klasse = 'Abzeichen Abzeichen-Gefahr benutzerdefinierte' >Abbrechen< / a >< a href = '#' Klasse = 'badge badge-info benutzerdefiniert' >Senden< / a >
Ausgabe
Wie werden Abzeichen abgerundet?
Um die Abzeichenkanten abgerundeter zu machen, fügen Sie eine Klasse hinzu „ Abzeichen-Pille “. Diese Klasse unterstützt ein größeres „ Grenzradius “ und horizontal “ Polsterung ' Eigenschaften:
< Spanne Klasse = 'abzeichen abzeichen-pille abzeichen-gefahr benutzerdefinierte' >Konto nicht verifiziert < / Spanne >< Spanne Klasse = 'Abzeichen Abzeichen-Pille Abzeichen-Warnung benutzerdefinierte' >Konto ausstehend Pro Zustimmung< / Spanne >
< Spanne Klasse = 'abzeichen abzeichen-pille abzeichen-erfolg benutzerdefinierte' >Konto verifiziert < / Spanne >
Ausgabe
Wie verwendet man das Bootstrap-Abzeichen als Zähler?
Um eine Schaltfläche mit einem Zähler zu erstellen, fügen Sie ein HTML „
Benachrichtigungen < Spanne Klasse = 'Abzeichen Abzeichen-Licht' > 4 < / Spanne >
< / Knopf >
Ausgabe
Das war alles über Bootstrap-Abzeichen und ihre relevanten Labels in Bootstrap.
Fazit
Der Bootstrap“ Abzeichen ”-Klasse wird verwendet, um der Website Abzeichen hinzuzufügen. Klassen wie „ Abzeichen-Gefahr “, „ Abzeichen-Info “, und mehr können verwendet werden, um den Abzeichen kontextbezogene Informationen als Beschriftung hinzuzufügen. Einige Klassen werden angewendet, um den Abzeichen Symbole hinzuzufügen, z. B. „ weiter Fa-Zeiten-Kreis “, um ein Kreuz-Kreis-Symbol zu platzieren. Dieser Beitrag enthält eine umfassende Anleitung zu Bootstrap-Abzeichen und -Etiketten.