Bootstrap | Abzeichen und Etiketten

Website -Abzeichen sind in der Regel kleine Grafiken in jeder Anwendung. Die Abzeichen werden auch als Website -Schaltflächen bezeichnet, die mit einer anderen Website verknüpft oder für einen bestimmten Zweck verwendet werden. In Bootstrap 3 gab es eine separate Klasse für Etiketten, aber da wir Bootstrap 4 verwenden, wurde die Etikettenklasse durch das "der" ersetzt "Abzeichen" Klasse.

In diesem Artikel werden die folgenden Perspektiven behandelt, um die Verwendung von Bootstrap -Abzeichen zu demonstrieren:

• So verwenden Sie Bootstrap -Abzeichen für zusätzliche Informationen?
• So verwenden Sie Bootstrap -Abzeichen für Kontextinformationen?
• So fügen Sie dem Bootstrap -Abzeichen benutzerdefinierte Stile hinzu?
• So fügen Sie dem Bootstrap -Abzeichen Symbole hinzu?
• So verknüpfen Sie das Bootstrap -Abzeichen mit einer anderen Quelle?
• Wie man Abzeichen rundet?
• So verwenden Sie Bootstrap -Abzeichen als Zähler?

Was sind Bootstrap -Abzeichen?

Abzeichen sind die grundlegenden Komponenten, die verwendet werden, um einen Indikator anzuzeigen. Zum Beispiel können sie 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, z. B. im angegebenen Bild angezeigt:

So verwenden Sie Bootstrap -Abzeichen für zusätzliche Informationen?

Bootstrap -Abzeichen können in die 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 Hinzufügungsinformationen zu verwenden, werden zunächst:

• Hinzufügen "

  " Und "

  Elemente.

• Setze das "”Element mit dem“Abzeichen" Und "Abzeichen-*" Klassen. Die Klasse „Abzeichen“ bezieht sich auf das Abzeichen mit der angegebenen Farbe:

VeranstaltungenNeu

Stipendien Neu

Es kann beobachtet werden, dass die entsprechenden Überschriften zwei Abzeichen hinzugefügt werden:

So verwenden Sie Bootstrap -Abzeichen für Kontextinformationen?

Bootstrap -Abzeichen können auch verwendet werden, um kontextbezogene Informationen wie “bereitzustellen“Badge-Danger”Zeigt das Abzeichen in roter Farbe an und kann verwendet werden, um einige fehlgeschlagene Nachrichten wie Abbrechen, ungültig oder mehr anzuzeigen. Der "Badge-SuccessWird verwendet, wo wir eine Erfolgsnachricht zeigen möchten.

Beispiel

Schauen Sie sich den angegebenen Code an, um das besprochene Szenario zu verstehen:

Konto nicht verifiziert
Dies ist Abzeichen
Für die Genehmigung ausstehende Konto
Konto verifiziert

Ausgang

So fügen Sie dem Bootstrap -Abzeichen benutzerdefinierte Stile hinzu?

Sie können auch CSS verwenden, um den Bootstrap -Abzeichen ein einzigartiges Styling zu verleihen. Für ein besseres Verständnis eine Klasse mit dem Namen “Brauch”Wird in die“ hinzugefügt “" Element. Dann werden die folgenden Eigenschaften angewendet:

Konto nicht verifiziert
Dies ist Abzeichen
Für die Genehmigung ausstehende Konto
Konto verifiziert

Stil „benutzerdefinierter“ Klasse

.Brauch
Schriftgröße: 18px;
Schriftgewicht: 100;
Buchstabenabteilung: 1PX;
Polsterung: 8px 15px;

Der ".Brauch”Wird verwendet, um auf die zuzugreifen"Brauch" Klasse. Die folgenden Eigenschaften werden darauf angewendet:

• “Schriftgröße”Passt die Schriftgröße an.
• “SchriftgewichtErklärt die Dicke der Schriftart.
• “Buchstaben-Abstand”Fügt Platz zwischen den Buchstaben hinzu.
• “Polsterung”Bietet Platz um den Inhalt des Elements.

Ausgang

So fügen Sie dem Bootstrap -Abzeichen Symbole hinzu?

Wir können den Abzeichen auch verschiedene Symbole hinzufügen. Dazu gibt es mehrere Klassen, die für diese Ursache verwendet werden können. Weitere Informationen finden Sie auf der Font Awesome -Website.

Beispiel

In HTML fügen Sie eine "hinzu"" Element. Platzieren Sie in diesem Element das Inline -Element “”Oder„ “, um die Icon -Klasse einzufügen:

Konto nicht verifiziert


Konto verifiziert

Ausgang

So verknüpfen Sie das Bootstrap -Abzeichen mit einer anderen Quelle?

Um die Bootstrap -Abzeichen klickbar zu machen, platzieren Sie die “Abzeichen"Klassen innerhalb der HTML"Tag und geben Sie die Referenz der verknüpften Seite in "an"href”Attribut:

Stornieren
Einreichen

Ausgang

Wie man Abzeichen rundet?

Um die Abzeichenränder abgerundet zu machen, fügen Sie eine Klasse hinzu "Abzeichen”. Diese Klasse unterstützt eine größere “Grenzradius"Und horizontal"Polsterung" Eigenschaften:

Konto nicht verifiziert
Für die Genehmigung ausstehende Konto
Konto verifiziert

Ausgang

So verwenden Sie Bootstrap -Abzeichen als Zähler?

Um eine Schaltfläche mit einem Zähler zu erstellen, fügen Sie eine HTML hinzu “"Tag mit Typ"Taste”Und weisen Sie es die Schaltflächenklassen zu“Btn" Und "BTN-SUCCESS”. Dann schließen Sie die “einElement, um einen Zähler zu platzieren:

Benachrichtigungen 4

Ausgang

Das war alles um Bootstrap -Abzeichen und ihre relevanten Etiketten in Bootstrap.

Abschluss

Die Bootstrap "AbzeichenDie Klasse wird verwendet, um der Website Abzeichen hinzuzufügen. Zum Beispiel wie Klassen wie “Badge-Danger","Badge-Info”, Und mehr kann verwendet werden, um den Abzeichen als Etikett kontextbezogene Informationen hinzuzufügen. Einige Klassen werden angewendet, um den Abzeichen Symbole hinzuzufügen, wie z. "weit fa-times-circle”Ein Kreuzkreis-Symbol platzieren. Dieser Beitrag hat einen umfassenden Leitfaden zu Bootstrap -Abzeichen und Etiketten bereitgestellt.