alertas
Bootstrap proporciona una manera fácil de crear mensajes de alerta predefinidos:
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">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Inténtalo tú mismo " El aria-* atributo y × 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.
× (×) × (×) 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:
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 .