Alertas

Proporcione mensaxes de comentarios contextuais para as accións típicas dos usuarios cun puñado de mensaxes de alerta dispoñibles e flexibles.

Nesta páxina

Exemplos

As alertas están dispoñibles para calquera lonxitude de texto, así como un botón de peche opcional. Para un estilo adecuado, use unha das oito clases contextuais requiridas.alert-success (por exemplo, ). Para o despedimento en liña, use o complemento JavaScript de alertas .

Unha simple alerta principal: compróbaa!

Unha simple alerta secundaria: comprobalo!

Unha simple alerta de éxito: comprobalo!

Unha simple alerta de perigo: comprobalo!

Unha simple alerta de aviso: comprobeo!

Unha simple alerta de información: comprobeo!

Unha simple alerta luminosa: comprobalo!

Unha simple alerta escura: comprobalo!

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Cor da ligazón

Use a .alert-linkclase de utilidade para proporcionar rapidamente ligazóns de cores coincidentes en calquera alerta.

Unha alerta principal sinxela cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta secundaria cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta de éxito cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta de perigo cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta de aviso cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta de información cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta luminosa cunha ligazón de exemplo . Dálle un clic se queres.

Unha simple alerta escura cunha ligazón de exemplo . Dálle un clic se queres.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Contido adicional

As alertas tamén poden conter elementos HTML adicionais como títulos, parágrafos e divisores.

Ben feito!

Aww, si, leches esta importante mensaxe de alerta. Este texto de exemplo durarase un pouco máis para que poidas ver como funciona o espazo nunha alerta con este tipo de contido.

Sempre que o necesites, asegúrate de usar as utilidades de marxe para manter as cousas ben e ordenadas.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Iconas

Do mesmo xeito, podes usar as utilidades flexbox e as iconas Bootstrap para crear alertas con iconas. Dependendo das súas iconas e contido, pode querer engadir máis utilidades ou estilos personalizados.

Un exemplo de alerta cunha icona

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Necesitas máis dunha icona para as túas alertas? Considere usar máis iconas de arranque e facer un sprite SVG local así para facer referencia facilmente ás mesmas iconas repetidamente.

Un exemplo de alerta cunha icona

Un exemplo de alerta de éxito cunha icona

Un exemplo de alerta de aviso cunha icona

Un exemplo de alerta de perigo cunha icona

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Despedindo

Usando o complemento JavaScript de alerta, é posible descartar calquera alerta en liña. Aquí tes como:

Asegúrate de cargar o complemento de alerta ou o JavaScript de Bootstrap compilado.
Engade un botón de peche e a .alert-dismissibleclase, que engade un recheo adicional á dereita da alerta e coloca o botón de pechar.
No botón de pechar, engade o data-bs-dismiss="alert"atributo, que activa a funcionalidade de JavaScript. Asegúrate de usar o <button>elemento con el para un comportamento correcto en todos os dispositivos.
Para animar alertas ao ignoralas, asegúrate de engadir as clases .fadee ..show

Podes ver isto en acción cunha demostración en directo:

Santo guacamole! Deberías comprobar algúns destes campos a continuación.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Cando se descarta unha alerta, o elemento elimínase completamente da estrutura da páxina. Se un usuario do teclado ignora a alerta mediante o botón de pechar, perderase o foco de súpeto e, dependendo do navegador, restablecerase ao inicio da páxina/documento. Por este motivo, recomendamos incluír JavaScript adicional que escoite o closed.bs.alertevento e estableza mediante programación focus()a localización máis adecuada da páxina. Se planeas mover o foco a un elemento non interactivo que normalmente non recibe o foco, asegúrate de engadir tabindex="-1"ao elemento.

Sass

Variables

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Variante de mestura

Usado en combinación con $theme-colorspara crear clases de modificadores contextuais para as nosas alertas.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Bucle

Loop que xera as clases modificadoras co alert-variant()mixin.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

Comportamento de JavaScript

Disparadores

Activar a descarte dunha alerta mediante JavaScript:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

Ou con dataatributos nun botón dentro da alerta , como se demostrou anteriormente:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

Teña en conta que ao pechar unha alerta eliminarase do DOM.

Métodos

Podes crear unha instancia de alerta co construtor de alertas, por exemplo:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

Isto fai que unha alerta escoite eventos de clic en elementos descendentes que teñen o data-bs-dismiss="alert"atributo. (Non é necesario cando se usa a inicialización automática da API de datos).

Método	Descrición
`close`	Pecha unha alerta quitándoa do DOM. Se as clases `.fade`e `.show`están presentes no elemento, a alerta desaparecerá antes de eliminarla.
`dispose`	Destrúe a alerta dun elemento. (Elimina os datos almacenados no elemento DOM)
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: `bootstrap.Alert.getInstance(alert)`
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Events

Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event	Description
`close.bs.alert`	Fires immediately when the `close` instance method is called.
`closed.bs.alert`	Fired when the alert has been closed and CSS transitions have completed.

var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})