Bootstrap 5-Medaille

Abzeichen

Abzeichen (Badges) werden verwendet, um zusätzliche Informationen zum Inhalt hinzuzufügen:

in <span> in Elementen verwenden .badge Klassen und Kontextklassen (wie .bg-secondary) um rechteckige Abzeichen zu erstellen. Beachten Sie, dass die Abzeichen skaliert werden, um die Größe des übergeordneten Elements zu entsprechen (wenn vorhanden):

Beispiel

<h1>Beispielüberschrift <span class="badge bg-secondary">Neu</span></h1>
<h2>Beispielüberschrift <span class="badge bg-secondary">Neu</span></h2>
<h3>Beispielüberschrift <span class="badge bg-secondary">Neu</span></h3>
<h4>Beispielüberschrift <span class="badge bg-secondary">Neu</span></h4>
<h5>Beispielüberschrift <span class="badge bg-secondary">Neu</span></h5>
<h6>Beispielüberschrift <span class="badge bg-secondary">Neu</span></h6>

Probieren Sie es selbst aus

Kontextabzeichen

Verwenden Sie beliebige Kontextklassen (.bg-*) Farbe der Abzeichen ändern:

Beispiel

<span class="badge bg-primary">Haupt</span>
<span class="badge bg-secondary">Zweitrangig</span>
<span class="badge bg-success">Erfolg</span>
<span class="badge bg-danger">Gefährlich</span>
<span class="badge bg-warning">Warnung</span>
<span class="badge bg-info">Information</span>
<span class="badge bg-light">Hell</span>
<span class="badge bg-dark">Dunkel</span>

Probieren Sie es selbst aus

Kapselabzeichen

Verwendung .rounded-pill Klasse macht das Abzeichen runder:

Beispiel

<span class="badge rounded-pill bg-primary"> Haupt</span>
<span class="badge rounded-pill bg-secondary"> Sekundär</span>
<span class="badge rounded-pill bg-success"> Erfolgreich</span>
<span class="badge rounded-pill bg-danger"> Gefährlich</span>
<span class="badge rounded-pill bg-warning"> Warnung</span>
<span class="badge rounded-pill bg-info">Information</span>
<span class="badge rounded-pill bg-light">Hell</span>
<span class="badge rounded-pill bg-dark">Dunkel</span>

Probieren Sie es selbst aus

Abzeichen im Element

Beispiel für die Verwendung von Abzeichen innerhalb von Schaltflächen:

Beispiel

<button type="button" class="btn btn-primary">
  Nachricht <span class="badge bg-danger">4</span>
</button>

Probieren Sie es selbst aus