GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Tostadas en BOOTSTRAP
El componente de pan tostado es como un cuadro de alerta que sólo se muestra durante un par
de segundos cuando pasa algo (es decir, cuando el usuario hace clic en un botón, envía un
formulario, etc.).

Cómo crear una Tostada

Para crear una tostada, utilice la clase .toast, y añada .toast-header y .toast-body dentro de ella:

<div class="toast">
<div class="toast-header">
Encabezado de la Tostada
</div>
<div class="toast-body">
Algún texto en el cuerpo de la tostada
</div>
</div>

Nota: Las Tostadas deben inicializar con jQuery: seleccionar el elemento especificado y llamar el
método toast() .

<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>

Ver: Código 185.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Mostrar y Ocultar Tostadas

Las Tostadas están ocultas por defecto. Utilice el atributo data-autohide="false" para mostrar por
defecto. Para cerrarla, utilizar un <button> y añada data-dismiss="toast":

<div class="toast" data-autohide="false">

<div class="toast-header">
<strong class="mr-auto text-primary">Encabezado de Tostada</strong>
<small class="text-muted">Alguna info</small>
<button type="button" class="ml-2 mb-1 close" data-
dismiss="toast">&times;</button>
</div>
<div class="toast-body">
Algún texto en el cuerpo de la tostada
</div>
</div>

Ver: Código 186.html

Fíjese que las clases mr-auto, ml-2 y mb-1 se utilizan para agregar márgenes específicos.