Bootstrap te proporciona una manera fácil para crear mensajes de alerta. Para ello debes de utilizar la clase .alert, seguida de una de estas cuatro clases contextuales: .alert-success, .alert-info, .alert-warning o .alert-danger:
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Bootstrap: Alertas - Webdisenia</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Alertas</h2> <div class="alert alert-success"> <strong>Success!</strong> Este cuadro de alerta suele utilizarse para indicar acciones exitosas o positivas.</div> <div class="alert alert-info"> <strong>Info!</strong> Este cuadro de alerta suele utilizarse para indicar información sobre una acción.</div> <div class="alert alert-warning"> <strong>Warning!</strong> Este cuadro de alerta suele utilizase para indicar una advertencia que podría necesitar atención.</div> <div class="alert alert-danger"> <strong>Danger!</strong> Este cuadro de alerta suele utilizarse para indicar una acción potencialmente peligrosa o negativa.</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
Resultado en el navegador:
Cerrar los mensajes de alerta
Puedes añadir a los mensajes de alerta un botón de cierre para ocultar la alerta una vez leída. Para ello es necesario añadir class=”close” y data-dismiss=”alert”
Ejemplo:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap: alertas - Webdisenia</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Alertas</h2> Los elementos class="close" y data-dismiss="alert" se utilizan para cerrar los mensajes de alerta. <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> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
× (x) es un entidad HTML que es el icono preferido para botones de cierre, en vez de la letra “x”.
Resultado en el navegador:
Añadiendo enlaces a las alertas
Si el mensaje de la alerta contiene enlaces, deberías utilizar la clase .alert-link para que su aspecto se adapte al del resto del mensaje.
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Bootstrap: alertas - Webdisenia</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Alertas</h2> <div class="alert alert-success"> <strong>¡Bien hecho!</strong> Has leído correctamente <a href="#" class="alert-link">este mensaje</a>. </div> <div class="alert alert-info"> <strong>¡Atento!</strong> Este mensaje <a href="#" class="alert-link">requiere de tu atención</a>, aunque no es tan importante. </div> <div class="alert alert-warning"> <strong>¡Cuidado!</strong> Es muy importante que leas <a href="#" class="alert-link">este mensaje de alerta</a>. </div> <div class="alert alert-danger"> <strong>¡Error!</strong> <a href="#" class="alert-link">Haz algunos cambios</a> antes de volver a enviar el formulario. </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>