A tostada es como una notificación push o una especie de caja de alerta que aparece en una pantalla durante unos segundos cuando se realiza alguna acción y desaparece automáticamente después de 5 segundos. Las tostadas se construyen con FlexBox, lo que significa que puede alinearlas y colocarlas fácilmente como su requisito.

Este artículo está diseñado para darle el conocimiento sobre

• Creando tostadas
• Posicionamiento de la tostada
• Tostada apilada
• Atributos de datos para la tostada

Creando tostadas

Para crear una tostada, tome dos divs con la clase .tostada, .Tostada de tostadas y envoltura ellos dentro de un con la clase .tostada, También da un único identificación a este div. Entonces usa esto identificación Para conectar un botón con tostadas que activarán la tostada.

Código

Tostada básica

<Tostada

Encabezado de tostada

Este artículo es sobre Bootstrap 5 Toasts.

Así es como se crea una tostada básica.

Posicionar la tostada

Para colocar una tostada en cualquier lugar de una pantalla, simplemente puede usar propiedades de posicionamiento de CSS para mostrar su tostada en cualquier lugar de una pantalla.

Código

Encabezado de tostada

Este artículo es sobre Bootstrap 5 Toasts.

Como verá en el ejemplo anterior, coloqué mi tostada en la esquina inferior derecha usando CSS en línea.

Tostadas apiladas

En Bootstrap 5, también puedes apilar las tostadas si hay más de un tostado. Para apilar una tostada simplemente

Agregue múltiples tostadas en un solo y da posición de acuerdo con tu elección.

Código

Encabezado de tostada

Este artículo es sobre Bootstrap 5 Toasts.

Encabezado de tostada

Este artículo es sobre Bootstrap 5 Toasts.

Así es como apilas tostadas.

Atributos de datos para Toast

Si no desea ocultar su tostada automáticamente, use data-autohide = atributo "falso" con .clase de tostada y si desea que su brindis se quede más tiempo, entonces use Data-DeLay = atributo de "valor en milisegundos" Como 3000 = 3 segundos. Por defecto, el valor de la demora es de 1000 milisegundos, pero puede cambiar utilizando el atributo de Data-Delay.

Código

Encabezado de tostada

Este artículo es sobre Bootstrap 5 Toasts.

Encabezado de tostada

Este artículo es sobre Bootstrap 5 Toasts.

Como ve claramente la diferencia en el ejemplo anterior, el primer tostado se esconde automáticamente después de 3.5 segundos, mientras que el segundo tostado permanece debido a Data-Autohide = "falso" atributo.

Conclusión

Las tostadas se crean usando un con .clase de tostada, luego envolver .tostada de cabeza de tostada Div y .Toast-Body Div Inside .Toast Div. Para abrir una tostada que puedas usar .espectáculo clase con .clase de tostada O puede escribir un código JavaScript para abrirlo dando identificación hacia .clase de tostada.Tostadas están ocultos por defecto, por eso usamos .clase de show.