HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Alertas de arranque

❮ Anterior Próximo ❯

Alertas

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

× ¡Éxito! Este cuadro de alerta indica una acción exitosa o positiva.
× ¡Información! Este cuadro de alerta indica un cambio o acción informativo neutral.
× ¡Advertencia! Este cuadro de alerta indica una advertencia que podría necesitar atención.
× ¡Peligro! Este cuadro de alerta indica una acción peligrosa o potencialmente negativa.

Las alertas se crean con la clase , .alertseguida de una de las cuatro clases contextuales .alert-success, o .alert-info:.alert-warning.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>

Enlaces de alerta

Agregue la alert-linkclase a cualquier enlace dentro del cuadro de alerta para crear "enlaces de colores coincidentes":

¡Éxito! Deberías leer este mensaje .
¡Información! Deberías leer este mensaje .
¡Advertencia! Deberías leer este mensaje .
¡Peligro! Deberías leer este mensaje .

Ejemplo

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Alertas de cierre

× Haga clic en el símbolo "x" a la derecha para cerrarme.

Para cerrar el mensaje de alerta, agregue una .alert-dismissible clase al contenedor de alerta. Luego agregue class="close"y data-dismiss="alert" a un enlace o un elemento de botón (cuando haga clic en esto, el cuadro de alerta desaparecerá).

Ejemplo

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

El atributo aria-* y × explicación

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

&veces; (×) es una entidad HTML que es el ícono preferido para los botones de cierre, en lugar de la letra "x".
Para obtener una lista de todas las entidades HTML, visite nuestra Referencia de entidades HTML .

Alertas animadas

× Haga clic en el símbolo "x" a la derecha para cerrarme. Me "desvaneceré".

Las clases .fadey .inagregan un efecto de desvanecimiento al cerrar el mensaje de alerta:

Ejemplo

<div class="alert alert-danger fade in">

Ponte a prueba con ejercicios

Ejercicio:

Agregue una clase de "alerta" de Bootstrap para mostrar el resultado de una acción exitosa.

<div class="">
  Success!
</div>

Referencia completa de alerta Bootstrap

Para obtener una referencia completa de todas las opciones de alerta, métodos y eventos, vaya a nuestra Referencia de alerta de Bootstrap JS .


❮ Anterior Próximo ❯