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.
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 .
<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-hidden
clase.
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.
<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:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'success')
})
}
Cor da ligazón
Use a .alert-link
clase de utilidade para proporcionar rapidamente ligazóns de cores coincidentes en calquera alerta.
<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, pode usar as utilidades de 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.
<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.
<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>
Descartando
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-dismissible
clase, 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
.fade
e ..show
Podes ver isto en acción cunha demostración en directo:
<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>
closed.bs.alert
evento 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-colors
para 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
Inicializar
Inicializa elementos como alertas
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return 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 data
atributo 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-target
como 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
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 |
Método estático que che permite obter a instancia de alerta asociada a un elemento DOM, podes usalo así: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) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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 close se chama ao método de instancia. |
closed.bs.alert |
Despediuse cando se pechou a alerta e se completaron as transicións CSS. |
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()
})