Source

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 .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
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-onlyKlasse verborgen ist.

Verwenden Sie die .alert-linkUtility-Klasse, um in jeder Warnung schnell übereinstimmende farbige Links bereitzustellen.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Zusätzlicher Inhalt

Alerts können auch zusätzliche HTML-Elemente wie Überschriften, Absätze und Trennlinien enthalten.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

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 erstellenutil.js , ist . Die kompilierte Version enthält dies.
  • Fügen Sie eine Entlassungsschaltfläche und die .alert-dismissibleKlasse hinzu, wodurch rechts neben der Warnung zusätzliche Polsterung hinzugefügt und die .closeSchaltflä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 .fadeund hinzu..show

Sie können dies in Aktion mit einer Live-Demo sehen:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript-Verhalten

Löst aus

Verwerfen einer Warnung über JavaScript aktivieren:

$('.alert').alert()

Oder mit dataAttributen auf einer Schaltfläche innerhalb der Warnung , wie oben gezeigt:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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 .fadeund .showfür das Element vorhanden sind, wird die Warnung ausgeblendet, bevor sie entfernt wird.
$().alert('dispose') Zerstört die Warnung eines Elements. 
$(".alert").alert('close')

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 closeInstanzmethode aufgerufen wird.
closed.bs.alert Dieses Ereignis wird ausgelöst, wenn die Warnung geschlossen wurde (wartet auf den Abschluss der CSS-Übergänge). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})