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 .

Dies ist eine primäre Warnung – sehen Sie sich das an!

Dies ist eine sekundäre Warnung – sehen Sie sich das an!

Dies ist eine Erfolgsmeldung – probieren Sie es aus!

Dies ist eine Gefahrenwarnung – sehen Sie es sich an!

Dies ist ein Warnhinweis – überprüfen Sie ihn!

Dies ist eine Info-Warnung – check it out!

Dies ist eine leichte Warnung – sehen Sie es sich an!

Dies ist ein dunkler Alarm – sehen Sie es sich an!

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a 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.

Verknüpfungsfarbe

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

Dies ist eine primäre Warnung mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist eine sekundäre Warnung mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist eine Erfolgsmeldung mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist ein Gefahrenhinweis mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist eine Warnmeldung mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist ein Info-Alert mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist eine leichte Warnung mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

Dies ist ein Dark Alert mit einem Beispiellink . Klicken Sie es an, wenn Sie möchten.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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.

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.

<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:

Heilige Guacamole! Sie sollten einige dieser Felder unten überprüfen.

<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 `.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.

$(".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 `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).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})