Bootstrap Alertas (Alerts)

Este capítulo explicará las alertas (Alerts) y las clases que Bootstrap proporciona para las alertas. Las alertas (Alerts) ofrecen a los usuarios una forma de definir el estilo de los mensajes. Proporcionan información de retroalimentación contextual para las acciones típicas de los usuarios.

Puede agregar un botón de cierre opcional al cuadro de alerta. Para crear un cuadro de alerta descartable en línea, utiliceel plugin jQuery de alertas (Alerts)。

Puede, creando un <div> y añadiéndole una.alertclass y una de las cuatro clases contextuales (es decir, .alert-success、.alert-info、.alert-warning、.alert-danger), para agregar un cuadro de alerta básico. El siguiente ejemplo demuestra esto:

Ejemplo

<div class="alert alert-success">¡Éxito! Ha completado el envío correctamente.</div> <div class="alert alert-info">¡Información! Tenga en cuenta esta información.</div> <div class="alert alert-warning">¡Advertencia! Por favor, no envíe.</div> <div class="alert alert-danger">¡Error! Por favor, realice algunos cambios.</div>

Pruébalo »

El resultado se muestra a continuación:

警告（Alerts）

Alertas descartables (Dismissal Alerts)

Los pasos para crear una alerta descartable (Dismissal Alert) son los siguientes:

  • Creando un <div> y añadiéndole una.alertclass y una de las cuatro clases contextuales (es decir, .alert-success、.alert-info、.alert-warning、.alert-danger), para agregar un cuadro de alerta básico.
  • Al mismo tiempo, agregue la class opcional a la class del <div> anterior..alert-dismissable。
  • Agregue un botón de cierre.

El siguiente ejemplo demuestra esto:

Ejemplo

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>¡Éxito! Ha completado el envío correctamente.</div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>¡Información! Tenga en cuenta esta información.</div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>¡Advertencia! Por favor, no envíe.</div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>¡Error! Por favor, realice algunos cambios.</div>

Asegúrese de usar undata-dismiss="alert"elemento <button> con el atributo data.
Pruébalo »

El resultado se muestra a continuación:

可取消的警告（Dismissal Alerts）

Enlaces en las alertas (Alerts)

Los pasos para crear enlaces en las alertas (Alerts) son los siguientes:

  • Creando un <div> y añadiéndole una.alertclass y una de las cuatro clases contextuales (es decir, .alert-success、.alert-info、.alert-warning、.alert-danger), para agregar un cuadro de alerta básico.
  • Use.alert-linkla clase de entidad para proporcionar rápidamente enlaces con colores coincidentes.

Ejemplo

<div class="alert alert-success"> <a href="#" class="alert-link">¡Éxito! Ha completado el envío correctamente.</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">¡Información! Tenga en cuenta esta información.</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">¡Advertencia! Por favor, no envíe.</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">¡Error! Por favor, realice algunos cambios.</a> </div>

Pruébalo »

El resultado se muestra a continuación:

警告（Alerts）中的链接
Otras extensiones