Toast

Push-Benachrichtigungen an Ihre Besucher mit einem Toast, einer leichten und leicht anpassbaren Warnmeldung.

Auf dieser Seite

Toasts sind einfache Benachrichtigungen, die die Push-Benachrichtigungen nachahmen sollen, die von Mobil- und Desktop-Betriebssystemen populär gemacht wurden. Sie sind mit Flexbox gebaut, sodass sie einfach auszurichten und zu positionieren sind.

Überblick

Wissenswertes zur Verwendung des Toast-Plugins:

Toasts sind aus Leistungsgründen optional, daher müssen Sie sie selbst initialisieren .
Toasts werden automatisch ausgeblendet, wenn Sie nicht angeben autohide: false.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Beispiele

Basic

Um erweiterbare und vorhersehbare Toasts zu fördern, empfehlen wir einen Header und einen Body. Toast-Header verwenden display: flex, was dank unserer Rand- und Flexbox-Dienstprogramme eine einfache Ausrichtung des Inhalts ermöglicht.

Toasts sind so flexibel wie Sie es brauchen und haben nur sehr wenig erforderliches Markup. Wir verlangen mindestens ein einzelnes Element, das Ihren „gerösteten“ Inhalt enthält, und empfehlen dringend eine Schaltfläche zum Schließen.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Zuvor haben unsere Skripte die .hideKlasse dynamisch hinzugefügt, um einen Toast vollständig auszublenden (mit display:nonestatt nur mit opacity:0). Dies ist nun nicht mehr notwendig. Aus Gründen der Abwärtskompatibilität wird unser Skript die Klasse jedoch bis zur nächsten Hauptversion weiter umschalten (obwohl es keinen praktischen Bedarf dafür gibt).

Live-Beispiel

Klicken Sie auf die Schaltfläche unten, um einen Toast anzuzeigen (positioniert mit unseren Dienstprogrammen in der unteren rechten Ecke), der standardmäßig ausgeblendet wurde.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Durchscheinend

Toasts sind leicht durchscheinend, um mit dem, was darunter liegt, zu verschmelzen.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stapeln

Sie können Toasts stapeln, indem Sie sie in einen Toastbehälter wickeln, wodurch vertikal etwas Abstand entsteht.

Sehen? Genau wie dieser.

Kopf hoch, Toasts werden automatisch gestapelt

html

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Benutzerdefinierte Inhalte

Passen Sie Ihre Toasts an, indem Sie Unterkomponenten entfernen, sie mit Dienstprogrammen optimieren oder Ihr eigenes Markup hinzufügen. Hier haben wir einen einfacheren Toast erstellt .toast-header, indem wir die Standardeinstellung entfernt, ein benutzerdefiniertes Symbol zum Ausblenden von Bootstrap Icons hinzugefügt und einige Flexbox-Dienstprogramme zum Anpassen des Layouts verwendet haben.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternativ können Sie Toasts auch zusätzliche Steuerelemente und Komponenten hinzufügen.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Farbschemata

Aufbauend auf dem obigen Beispiel können Sie mit unseren Farb- und Hintergrunddienstprogrammen verschiedene Toast-Farbschemata erstellen . Hier haben wir .text-bg-primaryzum .toastund dann .btn-close-whitezu unserem Schließen-Button hinzugefügt. Für einen scharfen Rand entfernen wir den Standardrand mit .border-0.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Platzierung

Platzieren Sie Toasts mit benutzerdefiniertem CSS nach Bedarf. Oben rechts wird oft für Benachrichtigungen verwendet, ebenso wie oben in der Mitte. Wenn Sie immer nur einen Toast auf einmal anzeigen möchten, platzieren Sie die Positionierungsstile direkt auf dem .toast.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Erwägen Sie für Systeme, die mehr Benachrichtigungen generieren, die Verwendung eines Wrapping-Elements, damit sie sich leicht stapeln lassen.

Sehen? Genau wie dieser.

Kopf hoch, Toasts werden automatisch gestapelt

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Sie können sich auch mit Flexbox-Dienstprogrammen austoben, um Toasts horizontal und/oder vertikal auszurichten.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Barrierefreiheit

Toasts sind als kleine Unterbrechungen für Ihre Besucher oder Benutzer gedacht. Um Benutzern mit Screenreadern und ähnlichen Hilfstechnologien zu helfen, sollten Sie Ihre Toasts in einen aria-liveBereich einschließen . Änderungen an Live-Bereichen (z. B. das Einfügen/Aktualisieren einer Toastkomponente) werden automatisch von Bildschirmleseprogrammen angekündigt, ohne dass der Fokus des Benutzers verschoben oder der Benutzer anderweitig unterbrochen werden muss. Stellen aria-atomic="true"Sie außerdem sicher, dass der gesamte Toast immer als einzelne (atomare) Einheit angekündigt wird, anstatt nur die Änderungen anzukündigen (was zu Problemen führen kann, wenn Sie nur einen Teil des Inhalts des Toasts aktualisieren oder denselben Toast-Inhalt anzeigen zu einem späteren Zeitpunkt). Wenn die benötigten Informationen für den Prozess wichtig sind, zB für eine Fehlerliste in einem Formular, dann nutzen Sie die Alert-Komponentestatt Toast.

Beachten Sie, dass die Live-Region im Markup vorhanden sein muss, bevor der Toast generiert oder aktualisiert wird. Wenn Sie beide gleichzeitig dynamisch generieren und in die Seite einfügen, werden sie in der Regel nicht von Hilfstechnologien angekündigt.

Je nach Inhalt müssen Sie auch die roleund Ebene anpassen . aria-liveWenn es sich um eine wichtige Nachricht wie einen Fehler handelt, verwenden Sie role="alert" aria-live="assertive", andernfalls verwenden Sie role="status" aria-live="polite"Attribute.

Wenn sich der angezeigte Inhalt ändert, stellen Sie sicher, dass Sie das delayZeitlimit aktualisieren , damit die Benutzer genügend Zeit haben, den Toast zu lesen.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Wenn Sie verwenden autohide: false, müssen Sie eine Schließen-Schaltfläche hinzufügen, damit Benutzer den Toast verwerfen können.

Hallo Welt! Dies ist eine Toast-Nachricht.

html

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Obwohl es technisch möglich ist, Ihrem Toast fokussierbare/umsetzbare Steuerelemente (z. B. zusätzliche Schaltflächen oder Links) hinzuzufügen, sollten Sie dies beim automatischen Ausblenden von Toasts vermeiden. Selbst wenn Sie dem Toast ein langes delayTimeout geben , können Tastatur- und Hilfstechnologiebenutzer es schwierig finden, den Toast rechtzeitig zu erreichen, um Maßnahmen zu ergreifen (da Toasts keinen Fokus erhalten, wenn sie angezeigt werden). Wenn Sie unbedingt weitere Steuerelemente benötigen, empfehlen wir die Verwendung eines Toasts mit autohide: false.

CSS

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Toasts jetzt lokale CSS-Variablen .toastfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass-Variablen

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Verwendungszweck

Toasts über JavaScript initialisieren:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Löst aus

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

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

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

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

Optionen

Da Optionen über Datenattribute oder JavaScript übergeben werden können, können Sie einen Optionsnamen data-bs-wie in anhängen data-bs-animation="{value}". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von " camelCase " in " kebab -case " ändern, wenn Sie die Optionen über Datenattribute übergeben. Verwenden Sie beispielsweise data-bs-custom-class="beautifier"anstelle von data-bs-customClass="beautifier".

Ab Bootstrap 5.2.0 unterstützen alle Komponenten ein experimentelles reserviertes Datenattribut, das eine data-bs-configeinfache Komponentenkonfiguration als JSON-String enthalten kann. Wenn ein Element über data-bs-config='{"delay":0, "title":123}'und data-bs-title="456"-Attribute verfügt, ist der endgültige titleWert 456und die separaten Datenattribute überschreiben die auf angegebenen Werte data-bs-config. Darüber hinaus können vorhandene Datenattribute JSON-Werte wie data-bs-delay='{"show":0,"hide":150}'.

Name	Typ	Standard	Beschreibung
`animation`	boolesch	`true`	Wenden Sie einen CSS-Fade-Übergang auf den Toast an.
`autohide`	boolesch	`true`	Blenden Sie den Toast nach der Verzögerung automatisch aus.
`delay`	Nummer	`5000`	Verzögerung in Millisekunden, bevor der Toast ausgeblendet wird.

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .

Methode	Beschreibung
`dispose`	Blendet den Toast eines Elements aus. Ihr Toast bleibt auf dem DOM, wird aber nicht mehr angezeigt.
`getInstance`	Statische Methode, mit der Sie die Toastinstanz abrufen können, die einem DOM-Element zugeordnet ist. Beispiel: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Gibt eine Bootstrap-Toast-Instanz zurück.
`getOrCreateInstance`	Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Toastinstanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Gibt eine Bootstrap-Toast-Instanz zurück.
`hide`	Blendet den Toast eines Elements aus. Kehrt zum Anrufer zurück, bevor der Toast tatsächlich ausgeblendet wurde (dh bevor das `hidden.bs.toast`Ereignis eintritt). Sie müssen diese Methode manuell aufrufen, wenn Sie dies vorgenommen `autohide`haben `false`.
`isShown`	Gibt einen booleschen Wert entsprechend dem Sichtbarkeitsstatus von Toast zurück.
`show`	Zeigt den Toast eines Elements an. Kehrt zum Anrufer zurück, bevor der Toast tatsächlich gezeigt wurde (dh bevor das `shown.bs.toast`Ereignis eintritt). Sie müssen diese Methode manuell aufrufen, stattdessen wird Ihr Toast nicht angezeigt.

Veranstaltungen

Vorfall	Beschreibung
`hide.bs.toast`	Dieses Ereignis wird sofort ausgelöst, wenn die `hide`Instanzmethode aufgerufen wurde.
`hidden.bs.toast`	Dieses Ereignis wird ausgelöst, wenn der Toast vollständig vor dem Benutzer ausgeblendet wurde.
`show.bs.toast`	Dieses Ereignis wird sofort ausgelöst, wenn die `show`Instanzmethode aufgerufen wird.
`shown.bs.toast`	Dieses Ereignis wird ausgelöst, wenn der Toast für den Benutzer sichtbar gemacht wurde.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})