Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Warnungen

Stellen Sie kontextbezogene Rückmeldungen für typische Benutzeraktionen mit einer Handvoll verfügbarer und flexibler Warnmeldungen bereit.

Auf dieser Seite

Beispiele

Benachrichtigungen sind für beliebige Textlängen sowie eine optionale Schließen-Schaltfläche 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 Benachrichtigungs-JavaScript-Plug -in .

<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 .visually-hiddenKlasse verborgen ist.

Live-Beispiel

Klicken Sie auf die Schaltfläche unten, um eine Warnung anzuzeigen (zu Beginn mit Inline-Stilen ausgeblendet), und schließen Sie sie dann mit der integrierten Schaltfläche zum Schließen (und zerstören).

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Wir verwenden das folgende JavaScript, um unsere Live-Alert-Demo auszulösen:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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>

Symbole

In ähnlicher Weise können Sie Flexbox-Dienstprogramme und Bootstrap-Symbole verwenden , um Warnungen mit Symbolen zu erstellen. Abhängig von Ihren Symbolen und Inhalten möchten Sie möglicherweise weitere Dienstprogramme oder benutzerdefinierte Stile hinzufügen.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Benötigen Sie mehr als ein Symbol für Ihre Benachrichtigungen? Erwägen Sie, mehr Bootstrap-Symbole zu verwenden und ein lokales SVG-Sprite zu erstellen, um auf einfache Weise wiederholt auf dieselben Symbole zu verweisen.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</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.
  • Fügen Sie eine Schaltfläche „Schließen“ und die .alert-dismissibleKlasse hinzu, wodurch rechts neben der Warnung eine zusätzliche Auffüllung hinzugefügt und die Schaltfläche „Schließen“ positioniert wird.
  • Fügen Sie auf der Schließen-Schaltfläche das data-bs-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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Wenn eine Warnung geschlossen wird, wird das Element vollständig aus der Seitenstruktur entfernt. Verwirft ein Tastaturbenutzer die Warnung mit dem Schließen-Button, geht sein Fokus plötzlich verloren und wird, je nach Browser, auf den Anfang der Seite/des Dokuments zurückgesetzt. Aus diesem Grund empfehlen wir, zusätzliches JavaScript einzubinden, das auf das closed.bs.alertEreignis lauscht und programmgesteuert focus()die am besten geeignete Stelle auf der Seite festlegt. Wenn Sie vorhaben, den Fokus auf ein nicht interaktives Element zu verschieben, das normalerweise keinen Fokus erhält, stellen Sie sicher, dass Sie tabindex="-1"dem Element etwas hinzufügen.

Sass

Variablen

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Variante mixin

Wird in Kombination mit verwendet $theme-colors, um kontextabhängige Modifikatorklassen für unsere Warnungen zu erstellen.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Schleife

Schleife, die die Modifikatorklassen mit dem alert-variant()Mixin generiert.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript-Verhalten

Initialisieren

Elemente als Warnungen initialisieren

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Für den alleinigen Zweck des Verwerfens einer Warnung ist es nicht erforderlich, die Komponente manuell über die JS-API zu initialisieren. Durch die Verwendung von data-bs-dismiss="alert"wird die Komponente automatisch initialisiert und ordnungsgemäß geschlossen.

Weitere Informationen finden Sie im Abschnitt Auslöser .

Löst aus

Die Entlassung kann mit dem dataAttribut auf einer Schaltfläche innerhalb der Warnung erreicht werden, wie unten gezeigt:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

oder auf einer Schaltfläche außerhalb der Warnung , indem Sie data-bs-targetwie unten gezeigt Folgendes verwenden:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

Beachten Sie, dass das Schließen einer Warnung diese aus dem DOM entfernt.

Methoden

Methode Beschreibung
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.
dispose Zerstört die Warnung eines Elements. (Entfernt gespeicherte Daten auf dem DOM-Element)
getInstance Statische Methode, mit der Sie die einem DOM-Element zugeordnete Alarminstanz abrufen können. Sie können sie wie folgt verwenden:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Statische Methode, die eine einem DOM-Element zugeordnete Alarminstanz zurückgibt oder eine neue erstellt, falls sie nicht initialisiert wurde. Sie können es wie folgt verwenden:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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 Wird sofort ausgelöst, wenn die closeInstanzmethode aufgerufen wird.
closed.bs.alert Wird ausgelöst, wenn die Warnung geschlossen und die CSS-Übergänge abgeschlossen wurden. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})