Ir ao contido principal Ir á navegación de documentos
Check
in English

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 .

html 
<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.

Exemplo en directo

Fai clic no botón de abaixo para mostrar unha alerta (oculta cos estilos en liña para comezar), despois descártaa (e destrúea) co botón de pechar integrado.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Usamos o seguinte JavaScript para activar a nosa demostración de alerta en directo:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

html 
<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.

html 
<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, pode usar as utilidades flexbox e as iconas de Bootstrap para crear alertas con iconas. Dependendo das súas iconas e contido, pode querer engadir máis utilidades ou estilos personalizados.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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:

html 
<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.

CSS

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, agora as alertas usan variables CSS locais activadas .alertpara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Variables Sass

$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

Sass mixin

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

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

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

Sass loop

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

Inicializar

Inicializa elementos como alertas

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Co único propósito de descartar unha alerta, non é necesario inicializar o compoñente manualmente a través da API JS. Ao facer uso de data-bs-dismiss="alert", o compoñente inicializarase automaticamente e eliminarase correctamente.

Consulte a sección disparadores para obter máis detalles.

Disparadores

O despedimento pódese conseguir co dataatributo nun botón dentro da alerta como se demostra a continuación:

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

ou nun botón fóra da alerta usando o data-bs-targetcomo se mostra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-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:

const 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 .fadee .showestá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 Método estático que permite obter a instancia de alerta asociada a un elemento DOM. Por exemplo: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Método estático que devolve unha instancia de alerta asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así: bootstrap.Alert.getOrCreateInstance(element).

Uso básico:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Eventos

O complemento de alerta de Bootstrap expón algúns eventos para conectarse á funcionalidade de alerta.

Evento Descrición
close.bs.alert Dispara inmediatamente cando closese chama ao método de instancia.
closed.bs.alert Despediuse cando se pechou a alerta e se completaron as transicións CSS. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})