Los últimos tutoriales de desarrollo web
 

Bootstrap Alerts


alertas

Bootstrap proporciona una manera fácil de crear mensajes de alerta predefinidos:

× éxito! Este cuadro de alerta indica una acción exitosa o positivo.
× Info! Este cuadro de alerta indica un cambio informativo neutral o acción.
× Advertencia! Este cuadro de alerta indica una advertencia de que puede ser que necesite atención.
× ¡Peligro! Este cuadro de alerta indica una acción peligrosa o potencialmente negativo.

Las alertas se crean con el .alert clase, seguida de una de las cuatro clases contextuales .alert-success , .alert-info , .alert-warning o .alert-danger :

Ejemplo

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Inténtalo tú mismo "

alertas de cierre

Para cerrar el mensaje de alerta, añadir class="close" y data-dismiss="alert" a un enlace o un elemento de botón:

Ejemplo

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Inténtalo tú mismo "

El aria-* atributo y &times; explicación

Para ayudar a mejorar la accesibilidad para las personas que utilizan lectores de pantalla, debe incluir el aria-label="close" atributo, al crear un botón de cierre.

&times; (×) &times; (×) es una entidad HTML que es el icono preferido para los botones de cerrar, en lugar de la letra "x" .


alertas animados

El .fade y .in clases añade un efecto de atenuación cuando se cierra el mensaje de alerta:

Ejemplo

<div class="alert alert-success fade in">
Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 »


Completar Bootstrap Alerta de referencia

Para una referencia completa de todas las opciones de alerta, métodos y eventos, visite nuestro Bootstrap JS Alerta de referencia .