Bootstrap 5 Alerts
Bootstrap 5 macht es einfach, Alert-Boxen zu erstellen.
Alerts können die.alert-Klasse verwenden, gefolgt von den.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightoder.alert-darkKlasse, um Folgendes zu erreichen:
Beispiel
<div class="alert alert-success">
<strong>Erfolg!</strong>Zeigt eine erfolgreiche oder positive Aktion an.</div>
Selbst ausprobieren »
Alerts mit Links
In Alerts fügen Sie diealert-link-Klasse hinzu, um einen Link festzulegen, der zur Alert-Farbe passt:
Beispiel
<div class="alert alert-success">
<strong>Erfolg!</strong>Sie sollten sorgfältig lesen<a href="#" class="alert-link">diese Nachricht</a>。
</div>
Selbst ausprobieren »
Alerts schließen
Wir können die.alert-dismissible-Klasse zum div im Alert hinzufügen und dann dieclass="btn-close"unddata-bs-dismiss="alert"-Klasse zum Schließen-Button-Link, um die Alert-Schließaktion festzulegen.
Beispiel
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Erfolg!</strong>Zeigt eine erfolgreiche oder positive Aktion an.</div>
Selbst ausprobieren »
Alert-Animationen
.fadeund.showDie Klasse wird verwendet, um die Ausblend- und Einblendeffekte beim Schließen des Alerts festzulegen:
Andere Erweiterungen