Neueste Web-Entwicklung Tutorials
 

Bootstrap Alerts


Benachrichtigungen

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

× Erfolg! Diese Warnmeldung zeigt eine erfolgreiche oder positive Wirkung.
× Info! Diese Warnung Feld zeigt eine neutrale informative Änderung oder Aktion.
× Achtung! Diese Warnmeldung zeigt eine Warnung an, die Aufmerksamkeit benötigen.
× Gefahr! Diese Warnmeldung weist auf eine gefährliche oder potentiell negative Handlung.

Alarme werden mit dem erstellten .alert Klasse, gefolgt von einem der vier Kontextklassen .alert-success , .alert-info , .alert-warning oder .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>
Versuch es selber "

Schluss Alerts

Um die Warnmeldung zu schließen, fügen Sie class="close" und data-dismiss="alert" auf einen Link oder ein Button - Element:

Beispiel

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Versuch es selber "

Das aria-* Attribut und &times; Erläuterung

Zur Verbesserung der Zugänglichkeit für Menschen Bildschirmlesegeräte verwenden, sollten Sie die gehören aria-label="close" Attribut, wenn eine Schaltfläche zum Schließen zu schaffen.

&times; (×) &times; (×) ist ein HTML - Entität , die das bevorzugte Symbol für Schließen - Button, anstatt den Buchstaben "x" .


Animierte Alerts

Die .fade und .in Klassen fügt einen Fading - Effekt , wenn die Warnmeldung endet:

Beispiel

<div class="alert alert-success fade in">
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 »


Füllen Sie Bootstrap Warnungsreferenz

Eine vollständige Referenz aller Warnoptionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Alert - Referenz .