Este tipo de mensajes se utilizan normalmente para proporcionar al usuario información contextual sobre el resultado de sus acciones.
6.15.1. Ejemplo sencillo
Para mostrar un mensaje de alerta, encierra dentro de un elemento con la clase .alert
tanto el texto del mensaje como el botón opcional para ocultar la alerta. Además de esta clase base, también debes aplicar cualquiera de las otras cuatro clases .alert-*
para indicar explícitamente el tipo de mensaje (advertencia, error, éxito, información).
Nota Los mensajes de alerta no definen un estilo por defecto. Por eso es obligatorio indicar siempre tanto la clase base .alert
como uno de sus modificadores (.alert-success
, etc.) El motivo es que en la práctica no tiene sentido mostrar un mensaje de alerta neutro (por ejemplo, de color gris claro), ya que las alertas siempre son de algún tipo (advertencia, error, éxito, información).
Ejemplo:
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
6.15.2. Cerrando los mensajes de alerta
Opcionalmente los mensajes de alerta pueden mostrar un botón de cierre para ocultar la alerta. Para que funcione este comportamiento, es necesario incluir el plugin alerts
de JavaScript. Ejemplo:
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>¡Cuidado!</strong> Es muy importante que leas este mensaje de alerta.
</div>
Así se ve este ejemplo en tu navegador (pulsa sobre la X
de la derecha para cerrar el mensaje):
Y esta es la imagen del aspecto que debería tener este ejemplo:
No olvides añadir el atributo data-dismiss="alert"
al botón que cierra la alerta para que funcione bien en todos los dispositivos.
6.15.3. Añadiendo enlaces a las alertas
Si el mensaje de la alerta contiene enlaces, resulta conveniente aplicarles la clase .alert-link
para que su aspecto se adapte al del resto del mensaje. Ejemplo:
<div class="alert alert-success">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">...</a>
</div>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo: