Warnungen
Stellen Sie kontextbezogene Rückmeldungen für typische Benutzeraktionen mit einer Handvoll verfügbarer und flexibler Warnmeldungen bereit.
Beispiele
Benachrichtigungen sind für beliebige Textlängen sowie eine optionale Schaltfläche zum Schließen verfügbar. Verwenden Sie für das richtige Styling eine der acht erforderlichen Kontextklassen (z . B. .alert-success
). Verwenden Sie für die Inline-Entlassung das jQuery-Plugin für Warnungen .
Bedeutung von Hilfstechnologien vermitteln
Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .sr-only
Klasse verborgen ist.
Verknüpfungsfarbe
Verwenden Sie die .alert-link
Utility-Klasse, um in jeder Warnung schnell übereinstimmende farbige Links bereitzustellen.
Zusätzlicher Inhalt
Alerts können auch zusätzliche HTML-Elemente wie Überschriften, Absätze und Trennlinien enthalten.
Gut erledigt!
Oh ja, Sie haben diese wichtige Warnmeldung erfolgreich gelesen. Dieser Beispieltext wird etwas länger laufen, damit Sie sehen können, wie die Abstände innerhalb einer Warnung mit dieser Art von Inhalten funktionieren.
Stellen Sie sicher, dass Sie bei Bedarf Margin-Dienstprogramme verwenden, um die Dinge schön und ordentlich zu halten.
Entlassung
Mit dem Benachrichtigungs-JavaScript-Plug-in ist es möglich, jede Benachrichtigung inline zu verwerfen. Hier ist wie:
- Stellen Sie sicher, dass Sie das Alert-Plugin oder das kompilierte Bootstrap-JavaScript geladen haben.
- Wenn Sie unser JavaScript aus der Quelle erstellen
util.js
, ist . Die kompilierte Version enthält dies. - Fügen Sie eine Entlassungsschaltfläche und die
.alert-dismissible
Klasse hinzu, wodurch rechts neben der Warnung zusätzliche Polsterung hinzugefügt und die.close
Schaltfläche positioniert wird. - Fügen Sie auf der Schaltfläche zum Schließen das
data-dismiss="alert"
Attribut hinzu, das die JavaScript-Funktionalität auslöst. Stellen Sie sicher, dass Sie das<button>
Element damit verwenden, um ein korrektes Verhalten auf allen Geräten zu gewährleisten. - Um Warnungen beim Schließen zu animieren, fügen Sie unbedingt die Klassen
.fade
und hinzu..show
Sie können dies in Aktion mit einer Live-Demo sehen:
JavaScript-Verhalten
Löst aus
Verwerfen einer Warnung über JavaScript aktivieren:
Oder mit data
Attributen auf einer Schaltfläche innerhalb der Warnung , wie oben gezeigt:
Beachten Sie, dass das Schließen einer Warnung diese aus dem DOM entfernt.
Methoden
Methode | Beschreibung |
---|---|
$().alert() |
Lässt eine Warnung auf Click-Ereignisse auf untergeordneten Elementen lauschen, die das data-dismiss="alert" Attribut haben. (Nicht erforderlich, wenn die Auto-Initialisierung der Daten-API verwendet wird.) |
$().alert('close') |
Schließt eine Warnung, indem sie aus dem DOM entfernt wird. Wenn die Klassen .fade und .show für das Element vorhanden sind, wird die Warnung ausgeblendet, bevor sie entfernt wird. |
$().alert('dispose') |
Zerstört die Warnung eines Elements. |
Veranstaltungen
Das Warn-Plug-in von Bootstrap macht einige Ereignisse verfügbar, um sich in die Warnfunktion einzuklinken.
Vorfall | Beschreibung |
---|---|
close.bs.alert |
Dieses Ereignis wird sofort ausgelöst, wenn die close Instanzmethode aufgerufen wird. |
closed.bs.alert |
Dieses Ereignis wird ausgelöst, wenn die Warnung geschlossen wurde (wartet auf den Abschluss der CSS-Übergänge). |