Bootstrap (Parte 8): Alertas

Redes sociales

Logo Bootstrap

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">&times;</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>

&times (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>

Resultado en el navegador:

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *