Die Abzeichen auf einer Website werden verwendet, um dem Benutzer einige wichtige Informationen zu liefern, z. Bootstrap 5 bietet eine bestimmte Klasse, mit der Sie Abzeichen auf Ihrer Website erstellen können. Neben ihrer Erstellung stehen auch andere Klassen zur Verfügung, um die Abzeichen zu stylen. Dieser Blog führt Sie dazu, wie Sie mit Bootstrap 5 nach und style Abzeichen erstellen und stylen können.

Wie man ein Abzeichen erstellt

Zum Zweck der Erstellung eines Abzeichens verwenden Sie die .Abzeichenklasse zusammen mit einer Hintergrund -Farbklasse, die sind .BG-Primary, .BG-Success, .BG-Sekundär, .BG-Info, .BG-Warnung, .BG-Danger, .BG-Licht, .BG-Dark.

Html

Klicken Sie hier Wichtig

Klicken Sie hier Wichtig

Um ein Abzeichen zu erstellen, wird das Element in a verwendet

Und

Element. Dem Element wurde die zugewiesen .Abzeichenklasse zusammen mit einer Hintergrundfarbeklasse, .BG-Warnung, um dem Abzeichen einen gelben Hintergrund zu geben. Beachten Sie, dass ein standardmäßig ein Abzeichen eine rechteckige Form hat und nach oben und unten skaliert werden, um der Größe des übergeordneten Elements zu entsprechen, falls es welche gibt.

Ausgang

Die Abzeichen in der obigen Ausgabe werden verwendet, um die Aufmerksamkeit einer Benutzer zu erregen.

Wie man Abzeichen eine Hintergrundfarbe verleiht

Abzeichen können eine Hintergrundfarbe unter Verwendung eines der Hintergrundfarben zur Verfügung gestellt werden. Diese Klassen spielen eine wichtige Rolle bei der Vermittlung der Bedeutung eines Abzeichens.

Html

Abzeichen
Abzeichen
Abzeichen
Abzeichen

Hier haben wir vier Abzeichen erstellt und jeder von ihnen wurde eine andere Hintergrundfarbe zugewiesen.

Ausgang

Jedes Abzeichen vermittelt eine andere Bedeutung.

Wie man abgerundete Abzeichen erstellt

Wie bereits erwähnt, haben Abzeichen standardmäßig eine rechteckige Form. Wenn Sie ihnen jedoch eine abgerundete Form geben möchten, dann verwenden Sie die .abgerundet Klasse.

Html

Abzeichen
Abzeichen
Abzeichen
Abzeichen

Der obige Code erzeugt jeweils vier pillenförmige Abzeichen mit einer anderen Hintergrundfarbe.

Ausgang

Die Abzeichen erhielten erfolgreich eine abgerundete Form.

Wie man Gegenzeichen erstellt

Zählerabzeichen können verwendet werden, um die Bekanntmachungsanzahl eines bestimmten Elements anzuzeigen. Um so Abzeichen zu erstellen, müssen Sie das Element innerhalb dieses bestimmten Elements nisten.

Html

Anrufe in Abwesenheit 8

Hier haben wir eine Schaltfläche „verpasste Anrufe“ mit einem bestimmten Stil erstellt und dann ein Element verschachtelt, das auch einen bestimmten Stil hat und die Anzahl der verpassten Anrufe anzeigt, wodurch die Benachrichtigungszahl für die verpassten Anrufe angezeigt wird.

Ausgang

Die obige Ausgabe zeigt, dass es insgesamt 8 verpasste Anrufe gibt.

Abschluss

Zum Zwecke des Erstellens und Stylings mit Bootstrap 5 verwenden Sie die .Abzeichen Klasse zusammen mit einer der Hintergrund -Farbklassen, die sind .BG-Primary, .BG-Success, .BG-Sekundär, .BG-Info, .BG-Warnung, .BG-Danger, .BG-Licht, .BG-Dark um ihnen eine Hintergrundfarbe zu geben. Darüber hinaus hat ein standardmäßig ein Abzeichen eine rechteckige Form, diese können jedoch eine abgerundete Form unter Verwendung der .abgerundet Klasse. Darüber hinaus machen Sie ein Benachrichtigungs -Zählerabzeichen, indem Sie das Abzeichen in einem Element nisten.