Upozornění
Poskytujte kontextové zprávy zpětné vazby pro typické akce uživatele pomocí několika dostupných a flexibilních výstražných zpráv.
Příklady
Upozornění jsou k dispozici pro libovolnou délku textu, stejně jako volitelné tlačítko Zavřít. Pro správný styl použijte jednu z osmi požadovaných kontextových tříd (např. .alert-success
). Pro okamžité zrušení použijte plugin JavaScript pro upozornění .
<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>
Předávání významu asistenčním technologiím
Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .visually-hidden
třídě.
Živý příklad
Kliknutím na tlačítko níže zobrazíte výstrahu (skrytou pomocí vložených stylů pro spuštění), poté ji zrušte (a zničte) pomocí vestavěného tlačítka Zavřít.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Ke spuštění živé ukázky upozornění používáme následující JavaScript:
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')
})
}
Barva odkazu
Použijte .alert-link
třídu utility k rychlému poskytnutí odpovídajících barevných odkazů v rámci jakéhokoli upozornění.
<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>
Další obsah
Upozornění mohou také obsahovat další prvky HTML, jako jsou nadpisy, odstavce a oddělovače.
Výborně!
Ach jo, úspěšně jste si přečetli tuto důležitou výstražnou zprávu. Tento ukázkový text poběží o něco déle, abyste viděli, jak funguje mezera v upozornění s tímto druhem obsahu.
Kdykoli budete potřebovat, nezapomeňte použít nástroje pro správu okrajů, aby byly věci pěkné a uklizené.
<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>
ikony
Podobně můžete použít nástroje flexbox a ikony Bootstrap k vytvoření výstrah s ikonami. V závislosti na vašich ikonách a obsahu můžete chtít přidat další nástroje nebo vlastní styly.
<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>
Potřebujete více než jednu ikonu pro svá upozornění? Zvažte použití více ikon Bootstrap a vytvoření místního sprite SVG, abyste mohli snadno odkazovat na stejné ikony opakovaně.
<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>
Propouštění
Pomocí pluginu JavaScriptu pro upozornění je možné zrušit jakékoli vložené upozornění. Zde je postup:
- Ujistěte se, že jste načetli výstražný plugin nebo kompilovaný Bootstrap JavaScript.
- Přidejte tlačítko Zavřít a
.alert-dismissible
třídu, která přidá další odsazení napravo od upozornění a umístí tlačítko Zavřít. - Na tlačítku Zavřít přidejte
data-bs-dismiss="alert"
atribut, který spouští funkci JavaScript. Ujistěte se, že<button>
prvek s ním používáte pro správné chování napříč všemi zařízeními. - Chcete-li animovat upozornění při jejich zavírání, nezapomeňte přidat třídy
.fade
a.show
.
Můžete to vidět v akci s živou ukázkou:
<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
události a programově nastavuje
focus()
nejvhodnější umístění na stránce. Pokud plánujete přesunout fokus na neinteraktivní prvek, který normálně fokus není, nezapomeňte
tabindex="-1"
prvek přidat.
Sass
Proměnné
$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
Varianta mixin
Používá se v kombinaci s $theme-colors
k vytváření tříd kontextových modifikátorů pro naše výstrahy.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Smyčka
Smyčka, která generuje třídy modifikátoru s alert-variant()
mixinem.
// 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);
}
}
Chování JavaScriptu
Inicializovat
Inicializovat prvky jako výstrahy
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Pouze za účelem zrušení výstrahy není nutné komponentu inicializovat ručně prostřednictvím rozhraní JS API. Použitím data-bs-dismiss="alert"
, bude komponenta automaticky inicializována a řádně ukončena.
Další podrobnosti naleznete v části spouštěče .
Spouštěče
Odmítnutí lze dosáhnout pomocí data
atributu na tlačítku v rámci výstrahy , jak je ukázáno níže:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
nebo na tlačítko mimo upozornění pomocí data-bs-target
níže uvedeného:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Všimněte si, že zavřením výstrahy ji odstraníte z DOM.
Metody
Metoda | Popis |
---|---|
close |
Zavře upozornění jeho odstraněním z DOM. Pokud jsou na prvku přítomny třídy .fade a .show , výstraha před odstraněním zmizí. |
dispose |
Zničí výstrahu prvku. (Odstraní uložená data v prvku DOM) |
getInstance |
Statická metoda, která vám umožní získat instanci výstrahy spojenou s prvkem DOM, můžete ji použít takto:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statická metoda, která vrátí instanci výstrahy přidruženou k prvku DOM nebo vytvoří novou v případě, že nebyla inicializována. Můžete jej použít takto:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Události
Zásuvný modul výstrah Bootstrap odhaluje několik událostí pro zapojení do funkce výstrah.
událost | Popis |
---|---|
close.bs.alert |
Spustí se okamžitě při close volání metody instance. |
closed.bs.alert |
Spustí se po uzavření výstrahy a dokončení přechodů 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()
})