Bootstrap4 Badges
Badges werden hauptsächlich verwendet, um neue oder ungelesene Elemente hervorzuheben. Um ein Badge zu verwenden, fügen Sie einfach die.badge-Klasse plus eine Farbklasse mit festgelegter Bedeutung (wie.badge-secondary) zum<span> hinzuElement ist ausreichend. Badges können sich entsprechend der Größe des übergeordneten Elements ändern:
Beispiel
<h1>Testtitel<span class="badge badge-secondary">Neu</span></h1>
<h2>Testtitel<span class="badge badge-secondary">Neu</span></h2>
<h3>Testtitel<span class="badge badge-secondary">Neu</span></h3>
<h4>Testtitel<span class="badge badge-secondary">Neu</span></h4>
<h5>Testtitel<span class="badge badge-secondary">Neu</span></h5>
<h6>Testtitel<span class="badge badge-secondary">Neu</span></h6>
Ausprobieren »
Badges verschiedener Farbtypen
Die folgende Liste enthält Badges aller Farbtypen:
Beispiel
<span class="badge badge-primary">Primär</span>
<span class="badge badge-secondary">Sekundär</span>
<span class="badge badge-success">Erfolg</span>
<span class="badge badge-danger">Gefahr</span>
<span class="badge badge-warning">Warnung</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Hell</span>
<span class="badge badge-dark">Dunkel</span>
Ausprobieren »
Pill-Badges
Verwende die.badge-pillKlasse, um pillenförmige Badges festzulegen:
Beispiel
<span class="badge badge-pill badge-default">Standard</span>
<span class="badge badge-pill badge-primary">Primär</span>
<span class="badge badge-pill badge-success">Erfolg</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warnung</span>
<span class="badge badge-pill badge-danger">Gefahr</span>
Ausprobieren »
Badges in Elemente einfügen
Das folgende Beispiel bettet ein Badge in einen Button ein:
Beispiel
<button type="button" class="btn btn-primary">
Nachrichten <span class="badge badge-light">4</span>
</button>
Ausprobieren »