Bootstrap 4 tostadas
Bootstrap 4 tostadas
El componente de brindis es como un cuadro de alerta que solo se muestra durante un par de segundos cuando sucede algo (es decir, cuando el usuario hace clic en un botón, envía un formulario, etc.).
Cómo crear un brindis
Para crear un brindis, use la .toastclase y agregue un .toast-headery un
.toast-bodydentro de ella:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Nota: los brindis deben inicializarse con jQuery: seleccione el elemento especificado y llame al toast()método.
El siguiente código mostrará todas las "tostadas" en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Mostrar y ocultar un brindis
Las tostadas están ocultas de forma predeterminada. Utilice el data-autohide="false"
atributo para mostrarlo de forma predeterminada. Para cerrarlo, use un elemento <button> y agregue data-dismiss="toast":
Ejemplo
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
Observe las clases mr-auto, ml-2y ? mb-1Se utilizan para añadir márgenes específicos. Aprenderá más sobre ellos en el Capítulo de Utilidades de Bootstrap 4 .
Referencia completa de Bootstrap Toast
Para obtener una referencia completa de todas las opciones, métodos y eventos de brindis, vaya a nuestra Referencia de brindis de Bootstrap JS .