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 cabeceira e 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 necesitas e teñen moi pouca marca. 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>

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 con .hide.

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

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

Coloca 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(0, 0, 0, .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(0, 0, 0, .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)
})

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 scrollspy 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 scrollspy asociada a un elemento DOM ou crear un novo no caso de que non fose inicializado

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...
})