Torradas

Envía notificacións aos teus visitantes cun brinde, unha mensaxe de alerta lixeira e facilmente personalizable.

Nesta páxina

Os brindis son notificacións lixeiras deseñadas para imitar as notificacións push que foron popularizadas polos sistemas operativos móbiles e de escritorio. Están construídos con flexbox, polo que son fáciles de aliñar e colocar.

Visión xeral

Cousas que debes saber ao usar o complemento toast:

As tostadas están activadas por motivos de rendemento, polo que debes inicializalas ti mesmo .
As tostadas ocultaranse automaticamente se non o especificas autohide: false.

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta multimedia. Consulta a sección de movemento reducido da nosa documentación de accesibilidade .

Exemplos

Básico

Para favorecer os brindis extensibles e previsibles, recomendamos unha cabeceira e un corpo. As cabeceiras Toast usan display: flex, que permiten un aliñamento sinxelo do contido grazas ás nosas utilidades de marxe e flexbox.

As tostadas son tan flexibles como necesites e teñen moi pouco de marcado. Como mínimo, esiximos un só elemento para conter o teu contido "tostado" e recomendamos encarecidamente un botón de exclusión.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Anteriormente, os nosos scripts engadiron a .hideclase de forma dinámica para ocultar completamente un brinde (con display:none, en lugar de só con opacity:0). Isto xa non é necesario. Non obstante, para a compatibilidade con versións anteriores, o noso script continuará cambiando a clase (aínda que non hai necesidade práctica del) ata a próxima versión principal.

Exemplo en directo

Fai clic no botón de abaixo para mostrar un brinde (situado coas nosas utilidades na esquina inferior dereita) que se ocultou por defecto.

Hello, world! This is a toast message.

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

Usamos o seguinte JavaScript para activar a nosa demostración de brindis en directo:

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

    toast.show()
  })
}

Translúcido

As tostadas son lixeiramente translúcidas para mesturarse co que hai debaixo delas.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Empilando

Podes apilar as torradas envolvéndoas nun recipiente para brindis, que engadirá un espazo vertical.

Ver? Só así.

Atención, as tostadas apilaranse automaticamente

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

Contido personalizado

Personaliza os teus brindis eliminando subcompoñentes, axustándoos con utilidades ou engadindo o teu propio marcado. Aquí creamos un brinde máis sinxelo eliminando o valor predeterminado .toast-header, engadindo unha icona de ocultación personalizada desde as iconas de Bootstrap e usando algunhas utilidades de flexbox para axustar o deseño.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Alternativamente, tamén pode engadir controis e compoñentes adicionais ás torradas.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Esquemas de cores

Partindo do exemplo anterior, podes crear diferentes esquemas de cores tostadas coas nosas utilidades de cor e fondo . Aquí engadimos .bg-primarye .text-whiteao botón .toast, e despois engadimos .btn-close-whiteao noso botón de pechar. Para un bordo nítido, eliminamos o bordo predeterminado con .border-0.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Colocación

Pon brindis con CSS personalizado segundo as necesites. A parte superior dereita úsase a miúdo para as notificacións, así como a parte superior do medio. Se só vai mostrar un brinde á vez, pon os estilos de posicionamento xusto no .toast.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Para os sistemas que xeran máis notificacións, considera usar un elemento de envoltura para que poidan apilarse facilmente.

Ver? Só así.

Atención, as tostadas apilaranse automaticamente

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

Tamén podes facerte elegante coas utilidades flexbox para aliñar as tostadas horizontal e/ou vertical.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Accesibilidade

Os brindis están pensados para ser pequenas interrupcións para os teus visitantes ou usuarios, polo que para axudar aos que teñen lectores de pantalla e tecnoloxías auxiliares similares, debes envolver os teus brindis nunha aria-liverexión . Os cambios nas rexións activas (como a inxección/actualización dun compoñente de brindis) son anunciados automaticamente polos lectores de pantalla sen necesidade de mover o foco do usuario ou interromper o usuario. Ademais, inclúa aria-atomic="true"asegurarse de que todo o brindis se anuncia sempre como unha única unidade (atómica), en lugar de anunciar o que se cambiou (o que pode provocar problemas se só actualiza parte do contido do brindis ou se mostra o mesmo contido do brindis). nun momento posterior). Se a información necesaria é importante para o proceso, por exemplo para unha lista de erros nun formulario, use o compoñente de alertaen vez de torradas.

Teña en conta que a rexión en directo debe estar presente no marcado antes de xerar ou actualizar o brinde. Se xeras ambos de forma dinámica ao mesmo tempo e os inxectas na páxina, xeralmente non serán anunciados polas tecnoloxías de asistencia.

Tamén hai que adaptar o nivel rolee aria-livedependendo do contido. Se se trata dunha mensaxe importante como un erro, utiliza role="alert" aria-live="assertive", se non, usa role="status" aria-live="polite"atributos.

A medida que cambia o contido que estás a mostrar, asegúrate de actualizar o tempo de delayespera para que os usuarios teñan tempo suficiente para ler o brinde.

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

Cando uses autohide: false, debes engadir un botón de pechar para permitir que os usuarios descarten o brinde.

Ola, mundo! Esta é unha mensaxe de brinde.

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

Aínda que tecnicamente é posible engadir controis enfocables/accionables (como botóns ou ligazóns adicionais) na túa tostada, debes evitar facelo para ocultar automaticamente as torradas. Aínda que lle deas ao brindis moito tempo de delayespera , os usuarios de teclado e tecnoloxía de asistencia poden ter dificultades para chegar ao brindis a tempo para actuar (xa que os brindis non reciben o foco cando se amosan). Se tes que ter máis controis, recomendámosche que uses un brinde con autohide: false.

Sass

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

Uso

Iniciar brindis mediante JavaScript:

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

Disparadores

O despedimento pódese conseguir co dataatributo nun botón dentro do brinde como se demostra a continuación:

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

ou nun botón fóra do brindis usando o data-bs-targetcomo se demostra a continuación:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-bs-, como en data-bs-animation="".

Nome	Tipo	Por defecto	Descrición
`animation`	booleano	`true`	Aplique unha transición de fundido CSS ao brinde
`autohide`	booleano	`true`	Oculta automaticamente o brinde
`delay`	número	`5000`	Atraso para ocultar o brinde (ms)

Métodos

Métodos asíncronos e transicións

Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .

Consulte a nosa documentación de JavaScript para obter máis información .

mostrar

Revela o brindis dun elemento. Volve ao interlocutor antes de que se amosara o brinde (é dicir, antes de shown.bs.toastque se produza o evento). Tes que chamar manualmente a este método, en cambio o teu brinde non se mostrará.

toast.show()

ocultar

Oculta o brinde dun elemento. Volve á persoa que chama antes de que o brinde se escondese (é dicir, antes de hidden.bs.toastque ocorra o evento). Tes que chamar manualmente a este método se fixeches autohidea false.

toast.hide()

dispor

Oculta o brinde dun elemento. O teu brinde permanecerá no DOM pero xa non se mostrará.

toast.dispose()

getInstance

Método estático que che permite obter a instancia de brindis asociada a un elemento DOM

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

getOrCreateInstance

Método estático que che permite obter a instancia de brindis asociada a un elemento DOM ou crear unha nova no caso de que non se inicializou

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

Eventos

Tipo de evento	Descrición
`show.bs.toast`	Este evento desenvólvese inmediatamente cando `show`se chama ao método de instancia.
`shown.bs.toast`	Este evento desenvólvese cando o brinde se fixo visible para o usuario.
`hide.bs.toast`	Este evento desenvólvese inmediatamente cando `hide`se chamou ao método de instancia.
`hidden.bs.toast`	Este evento desenvólvese cando o brinde rematou de ocultarse ao usuario.

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