Passer au contenu principal Passer à la navigation dans les documents
in English

Toasts

Notifications push à vos visiteurs avec un toast, un message d'alerte léger et facilement personnalisable.

Sur cette page

Les toasts sont des notifications légères conçues pour imiter les notifications push qui ont été popularisées par les systèmes d'exploitation mobiles et de bureau. Ils sont construits avec flexbox, ils sont donc faciles à aligner et à positionner.

Aperçu

Choses à savoir lors de l'utilisation du plugin toast :

  • Les toasts sont opt-in pour des raisons de performances, vous devez donc les initialiser vous -même .
  • Les toasts seront automatiquement masqués si vous ne spécifiez pas autohide: false.
L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité .

Exemples

De base

Pour encourager les toasts extensibles et prévisibles, nous recommandons un en-tête et un corps. Les en-têtes Toast utilisent display: flex, permettant un alignement facile du contenu grâce à nos utilitaires margin et flexbox.

Les toasts sont aussi flexibles que vous le souhaitez et ont très peu de balisage requis. Au minimum, nous exigeons qu'un seul élément contienne votre contenu "grillé" et encourageons fortement un bouton de rejet.

<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>
Auparavant, nos scripts ajoutaient dynamiquement la .hideclasse pour masquer complètement un toast (avec display:none, plutôt qu'avec opacity:0). Ce n'est désormais plus nécessaire. Cependant, pour des raisons de rétrocompatibilité, notre script continuera à basculer la classe (même s'il n'y a aucun besoin pratique) jusqu'à la prochaine version majeure.

Exemple en direct

Cliquez sur le bouton ci-dessous pour afficher un toast (positionné avec nos utilitaires dans le coin inférieur droit) qui a été masqué par défaut.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

Nous utilisons le JavaScript suivant pour déclencher notre démo live toast :

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

    toast.show()
  })
}

Translucide

Les toasts sont légèrement translucides pour se fondre dans ce qui se trouve en dessous.

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

Empilage

Vous pouvez empiler des toasts en les enveloppant dans un récipient à toasts, ce qui ajoutera un espacement vertical.

<div class="toast-container">
  <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>

Contenu personnalisé

Personnalisez vos toasts en supprimant des sous-composants, en les ajustant avec des utilitaires ou en ajoutant votre propre balisage. Ici, nous avons créé un toast plus simple en supprimant la valeur par défaut .toast-header, en ajoutant une icône de masquage personnalisée à partir de Bootstrap Icons et en utilisant certains utilitaires flexbox pour ajuster la mise en page.

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

Alternativement, vous pouvez également ajouter des commandes et des composants supplémentaires aux toasts.

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

Schémas de couleurs

En vous appuyant sur l'exemple ci-dessus, vous pouvez créer différents schémas de couleurs de pain grillé avec nos utilitaires de couleur et d'arrière -plan. Ici, nous avons ajouté .bg-primaryet .text-whiteau .toast, puis ajouté .btn-close-whiteà notre bouton de fermeture. Pour un bord net, nous supprimons la bordure par défaut avec .border-0.

<div class="toast align-items-center text-white 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>

Placement

Placez des toasts avec du CSS personnalisé selon vos besoins. Le coin supérieur droit est souvent utilisé pour les notifications, tout comme le milieu supérieur. Si vous ne devez afficher qu'un seul toast à la fois, placez les styles de positionnement directement sur le fichier .toast.

Amorcer il y a 11 minutes
Bonjour le monde! Ceci est un message toast. 
<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 position-absolute 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>

Pour les systèmes qui génèrent plus de notifications, envisagez d'utiliser un élément d'emballage afin qu'ils puissent facilement s'empiler.

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

Vous pouvez également faire preuve de fantaisie avec les utilitaires flexbox pour aligner les toasts horizontalement et/ou verticalement.

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

Accessibilité

Les toasts sont destinés à être de petites interruptions pour vos visiteurs ou utilisateurs, donc pour aider ceux qui ont des lecteurs d'écran et des technologies d'assistance similaires, vous devez envelopper vos toasts dans une aria-liverégion . Les modifications apportées aux régions en direct (telles que l'injection/la mise à jour d'un composant toast) sont automatiquement annoncées par les lecteurs d'écran sans qu'il soit nécessaire de déplacer le focus de l'utilisateur ou de l'interrompre d'une autre manière. De plus, incluez aria-atomic="true"pour vous assurer que le toast entier est toujours annoncé comme une seule unité (atomique), plutôt que d'annoncer simplement ce qui a été modifié (ce qui pourrait entraîner des problèmes si vous ne mettez à jour qu'une partie du contenu du toast, ou si vous affichez le même contenu de toast à un moment ultérieur). Si les informations nécessaires sont importantes pour le processus, par exemple pour une liste d'erreurs dans un formulaire, utilisez le composant d'alerteau lieu de pain grillé.

Notez que la région en direct doit être présente dans le balisage avant que le toast ne soit généré ou mis à jour. Si vous générez dynamiquement les deux en même temps et que vous les injectez dans la page, ils ne seront généralement pas annoncés par les technologies d'assistance.

Il faut aussi adapter le roleet le aria-liveniveau en fonction du contenu. S'il s'agit d'un message important comme une erreur, utilisez role="alert" aria-live="assertive", sinon utilisez des role="status" aria-live="polite"attributs.

Au fur et à mesure que le contenu que vous affichez change, assurez-vous de mettre à jour le delaydélai d'expiration afin que les utilisateurs aient suffisamment de temps pour lire le toast.

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

Lorsque vous utilisez autohide: false, vous devez ajouter un bouton de fermeture pour permettre aux utilisateurs de rejeter le toast.

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

Bien qu'il soit techniquement possible d'ajouter des commandes focalisables/actionnables (telles que des boutons ou des liens supplémentaires) dans votre toast, vous devez éviter de le faire pour masquer automatiquement les toasts. Même si vous accordez un long delaydélai d'attente au toast , les utilisateurs du clavier et des technologies d'assistance peuvent avoir du mal à atteindre le toast à temps pour agir (car les toasts ne reçoivent pas le focus lorsqu'ils sont affichés). Si vous devez absolument avoir des contrôles supplémentaires, nous vous recommandons d'utiliser un toast avec autohide: false.

Toupet

variables

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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);

Usage

Initialiser les toasts via JavaScript :

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Déclencheurs

Le rejet peut être obtenu avec l' dataattribut sur un bouton dans le toast , comme illustré ci-dessous :

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

ou sur un bouton à l'extérieur du toast en utilisant data-bs-targetcomme illustré ci-dessous :

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

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-bs-, comme dans data-bs-animation="".

Nom Taper Défaut La description
animation booléen true Appliquer une transition de fondu CSS au toast
autohide booléen true Masquer automatiquement le toast
delay Numéro 5000 Délai de masquage du toast (ms)

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré .

Consultez notre documentation JavaScript pour plus d'informations .

Afficher

Révèle le toast d'un élément. Revient à l'appelant avant que le toast n'ait été affiché (c'est-à-dire avant que l' shown.bs.toastévénement ne se produise). Vous devez appeler manuellement cette méthode, à la place votre toast ne s'affichera pas.

toast.show()

cacher

Masque le toast d'un élément. Retourne à l'appelant avant que le toast n'ait été masqué (c'est-à-dire avant que l' hidden.bs.toastévénement ne se produise). Vous devez appeler manuellement cette méthode si vous autohidel' avez fait false.

toast.hide()

disposer

Masque le toast d'un élément. Votre toast restera sur le DOM mais ne s'affichera plus.

toast.dispose()

getInstance

Méthode statique qui permet d'obtenir l'instance toast associée à un élément DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Méthode statique qui permet d'obtenir l'instance de toast associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Événements

Type d'événement La description
show.bs.toast Cet événement se déclenche immédiatement lorsque la showméthode d'instance est appelée.
shown.bs.toast Cet événement est déclenché lorsque le toast a été rendu visible à l'utilisateur.
hide.bs.toast Cet événement est déclenché immédiatement lorsque la hideméthode d'instance a été appelée.
hidden.bs.toast Cet événement est déclenché lorsque le toast a fini d'être caché à l'utilisateur. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})