Bootstrap - Alertas

Este capítulo discutirá sobre las alertas y las clases que Bootstrap proporciona para las alertas. Las alertas proporcionan una forma de diseñar mensajes para el usuario. Proporcionan mensajes de retroalimentación contextual para acciones típicas de los usuarios.

Puede agregar un icono de cierre opcional para alertar. Para el despido en línea, use el complemento Alerts jQuery .

Puede agregar una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (p. ej., .alert-success, .alert-info, .alert-warning, .alert-danger). El siguiente ejemplo demuestra esto:

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Alertas de despido

Para crear una alerta de despido:

  • Agregue una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (p. ej., .alert-success, .alert-info, .alert-warning, .alert-danger)

  • También agregue opcional .alert-dismissable a la clase <div> anterior.

  • Agrega un botón de cierre.

El siguiente ejemplo demuestra esto:

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>
Asegúrese de utilizar el elemento <button> con el atributo de datos data-dispats = "alert" .

Enlaces en alertas

Para obtener enlaces en alertas:

  • Agregue una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (p. ej., .alert-success, .alert-info, .alert-warning, .alert-danger)

  • Utilizar el .alert-link clase de utilidad para proporcionar rápidamente enlaces de colores coincidentes en cualquier alerta.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>