Bootstrap 4 -Warnungen
Bootstrap 4-Warnungen
Bootstrap 4 bietet eine einfache Möglichkeit, vordefinierte Warnmeldungen zu erstellen:
Warnungen werden mit der .alertKlasse erstellt, gefolgt von einer der kontextabhängigen Klassen .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-lightoder .alert-dark:
Beispiel
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Alarm-Links
Fügen Sie die alert-linkKlasse zu allen Links innerhalb des Warnfelds hinzu, um "übereinstimmende farbige Links" zu erstellen:
Beispiel
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Schließende Warnungen
Um die Warnmeldung zu schließen, fügen Sie dem Warncontainer eine .alert-dismissible
Klasse hinzu. Fügen Sie dann class="close"und data-dismiss="alert"
zu einem Link oder einem Schaltflächenelement hinzu (wenn Sie darauf klicken, verschwindet das Warnfeld).
Beispiel
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Tipp: × (×) ist eine HTML-Einheit, die anstelle des Buchstabens „x“ das bevorzugte Symbol für Schaltflächen zum Schließen ist.
Eine Liste aller HTML-Entitäten finden Sie in unserer HTML-Entitäten-Referenz .
Animierte Warnungen
Die Klassen .fadeund .showfügen beim Schließen der Warnmeldung einen Fading-Effekt hinzu:
Beispiel
<div class="alert alert-danger
alert-dismissible fade show">
Vollständige Bootstrap 4 Alert-Referenz
Eine vollständige Referenz aller Alert-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap 4 JS Alert Reference .