Sistema de diseño

Ejemplo básico

Hello, world! This is a toast message.


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">

    <div class="toast-header">

        <span class="icon-add-user mr-2"></span>

        <strong class="mr-auto">New user added</strong>

        <small class="ml-2">11 mins ago</small>

        <button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>

    </div>

    <div class="toast-body">

        Hello, world! This is a toast message.

    </div>

</div>

Toast apilados

Hello, world! This is a toast message.


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">

    <div class="toast-header">

        <span class="icon-add-user mr-2"></span>

        <strong class="mr-auto">New user added</strong>

        <small class="ml-2">11 mins ago</small>

        <button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>

    </div>


    <div class="toast-body">

        Hello, world! This is a toast message.

    </div>

</div>


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">

    <div class="toast-header">

        <span class="icon-add-user mr-2"></span>

        <strong class="mr-auto">New user added</strong>

        <small class="ml-2">11 mins ago</small>

        <button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>

    </div>

    <div class="toast-body">

        Hello, world! This is a toast message.

    </div>

</div>

Colocación

Coloque los Toast con CSS personalizado según lo necesite. La parte superior derecha a menudo se usa para notificaciones, al igual que la parte superior central. Si solo va a mostrar un Toast a la vez, coloque los estilos de posicionamiento directamente en el Toast.

Hello, world! This is a toast message.


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">

    <div class="toast-header">

        <span class="icon-add-user mr-2"></span>

        <strong class="mr-auto">New user added</strong>

        <small class="ml-2">11 mins ago</small>

        <button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>

    </div>

    <div class="toast-body">

        Hello, world! This is a toast message.

    </div>

</div>


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">

    <div class="toast-header">

        <span class="icon-add-user mr-2"></span>

        <strong class="mr-auto">New user added</strong>

        <small class="ml-2">11 mins ago</small>

        <button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>

    </div>

    <div class="toast-body">

        Hello, world! This is a toast message.

    </div>

</div>

¿Como usar?

Habilitar toast vía JavaScript


$('.toast').toast(option);

Más info