Bootstrap 4 Abzeichen
Beispielüberschrift Neu
Beispielüberschrift Neu
Beispielüberschrift Neu
Beispielüberschrift Neu
Beispielüberschrift Neu
Beispielüberschrift Neu
Badges werden verwendet, um zusätzliche Informationen zu beliebigen Inhalten hinzuzufügen. Verwenden Sie die .badgeKlasse zusammen mit einer kontextbezogenen Klasse (wie .badge-secondary) innerhalb <span>
von Elementen, um rechteckige Abzeichen zu erstellen. Beachten Sie, dass Badges so skaliert werden, dass sie der Größe des übergeordneten Elements (falls vorhanden) entsprechen:
Beispiel
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Kontextbezogene Abzeichen
Primär
Sekundär
Erfolg
Achtung
Warnung
Die Info
Hell
Dunkel
Verwenden Sie eine der kontextabhängigen Klassen ( .badge-*), um die Farbe eines Abzeichens zu ändern:
Beispiel
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
Pille-Abzeichen
Primär
Sekundär
Erfolg
Achtung
Warnung
Die Info
Hell
Dunkel
Verwenden Sie die .badge-pillKlasse, um die Abzeichen runder zu machen:
Beispiel
<span class="badge badge-pill badge-primary">Primary</span>
<span
class="badge badge-pill badge-secondary">Secondary</span>
<span
class="badge badge-pill badge-success">Success</span>
<span class="badge
badge-pill badge-danger">Danger</span>
<span class="badge badge-pill
badge-warning">Warning</span>
<span class="badge badge-pill
badge-info">Info</span>
<span class="badge badge-pill
badge-light">Light</span>
<span class="badge badge-pill
badge-dark">Dark</span>
Abzeichen in einem Element
Ein Beispiel für die Verwendung eines Abzeichens innerhalb einer Schaltfläche:
Beispiel
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>