HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap -Warnungen

❮ Vorherige Nächste ❯

Warnungen

Bootstrap bietet eine einfache Möglichkeit, vordefinierte Warnmeldungen zu erstellen:

× Erfolg! Dieses Warnfeld zeigt eine erfolgreiche oder positive Aktion an.
× Die Info! Dieses Warnfeld weist auf eine neutrale informative Änderung oder Aktion hin.
× Warnung! Dieses Warnfeld weist auf eine Warnung hin, die möglicherweise beachtet werden muss.
× Achtung! Dieses Warnfeld weist auf eine gefährliche oder möglicherweise negative Aktion hin.

Warnungen werden mit der .alertKlasse erstellt, gefolgt von einer der vier Kontextklassen .alert-success, .alert-info, .alert-warningoder .alert-danger:

Beispiel

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Alarm-Links

Fügen Sie die alert-linkKlasse zu allen Links innerhalb des Warnfelds hinzu, um "übereinstimmende farbige Links" zu erstellen:

Erfolg! Sie sollten diese Nachricht lesen .
Die Info! Sie sollten diese Nachricht lesen .
Warnung! Sie sollten diese Nachricht lesen .
Achtung! Sie sollten diese Nachricht lesen .

Beispiel

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Schließende Warnungen

× Klicken Sie rechts auf das "x"-Symbol, um mich zu schließen.

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">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Das Attribut aria-* und × Erklärung

Um die Barrierefreiheit für Benutzer von Screenreadern zu verbessern, sollten Sie das Attribut aria-label="close" einbeziehen, wenn Sie eine Schließen-Schaltfläche erstellen.

&mal; (×) 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

× Klicken Sie rechts auf das "x"-Symbol, um mich zu schließen. Ich werde „ausblenden“.

Die Klassen .fadeund .infügen beim Schließen der Warnmeldung einen Fading-Effekt hinzu:

Beispiel

<div class="alert alert-danger fade in">

Testen Sie sich mit Übungen

Übung:

Fügen Sie eine Bootstrap-Alert-Klasse hinzu, um das Ergebnis einer erfolgreichen Aktion anzuzeigen.

<div class="">
  Success!
</div>

Vollständige Bootstrap-Alert-Referenz

Eine vollständige Referenz aller Alert-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap JS Alert Reference .


❮ Vorherige Nächste ❯