Märguanded
Pakkuge tavapäraste kasutajatoimingute jaoks kontekstipõhiseid tagasisidesõnumeid käputäie saadaolevate ja paindlike hoiatusteadetega.
Näited
Hoiatused on saadaval mis tahes pikkusega teksti kohta, samuti valikuline sulgemisnupp. Õigeks stiiliks kasutage ühte kaheksast nõutavast kontekstiklassist (nt .alert-success
). Tekstisiseseks loobumiseks kasutage märguannete JavaScripti pistikprogrammi .
<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>
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hidden
Veenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Elav näide
Hoiatuse kuvamiseks klõpsake alloleval nupul (alustamiseks siseste stiilidega peidetud), seejärel loobuge (ja hävitage) see sisseehitatud sulgemisnupu abil.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Reaalajas hoiatuse demo käivitamiseks kasutame järgmist JavaScripti:
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')
})
}
Lingi värv
Kasutage .alert-link
utiliitklassi, et kiiresti pakkuda sobivaid värvilisi linke mis tahes hoiatuses.
<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>
Täiendav sisu
Märguanded võivad sisaldada ka täiendavaid HTML-elemente, nagu pealkirjad, lõigud ja jagajad.
Hästi tehtud!
Aww jah, lugesite selle olulise hoiatussõnumi edukalt läbi. See näidistekst kestab veidi kauem, et saaksite näha, kuidas hoiatuses vahed seda tüüpi sisu puhul töötavad.
Alati, kui vaja, kasutage kindlasti marginaali utiliite, et asjad oleksid kenad ja korras.
<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>
Ikoonid
Samamoodi saate ikoonidega hoiatuste loomiseks kasutada flexboxi utiliite ja Bootstrapi ikoone . Sõltuvalt teie ikoonidest ja sisust võite soovida lisada rohkem utiliite või kohandatud stiile.
<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>
Kas vajate oma hoiatuste jaoks rohkem kui ühte ikooni? Kaaluge rohkemate Bootstrapi ikoonide kasutamist ja sarnase kohaliku SVG spraiti loomist, et samadele ikoonidele korduvalt viidata.
<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>
Loobumine
Hoiatuse JavaScripti pistikprogrammi abil on võimalik kõigist märguannetest loobuda. Tehke järgmist.
- Veenduge, et oleksite laadinud hoiatusplugina või kompileeritud Bootstrap JavaScripti.
- Lisage sulgemisnupp ja
.alert-dismissible
klass, mis lisab hoiatuse paremale küljele täiendava polsterduse ja asetab sulgemisnupu. - Lisage sulgemisnupul
data-bs-dismiss="alert"
atribuut, mis käivitab JavaScripti funktsiooni. Kasutage seda<button>
elementi kindlasti kõigis seadmetes õigeks käitumiseks. - Märguannete animeerimiseks nendest loobumisel lisage kindlasti klassid
.fade
ja ..show
Näete seda reaalajas demo abil:
<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
sündmust ja seab programmiliselt
focus()
lehel kõige sobivama asukoha. Kui kavatsete viia fookuse mitteinteraktiivsele elemendile, mis tavaliselt ei fookusta, lisage
tabindex="-1"
element kindlasti.
Sass
Muutujad
$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
Variant mixin
Kasutatakse koos $theme-colors
meie hoiatuste kontekstimuutusklasside loomiseks.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Silmus, mis genereerib koos alert-variant()
mixiniga modifikaatoriklassid.
// 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);
}
}
JavaScripti käitumine
Initsialiseeri
Initsialiseerige elemendid hoiatustena
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Ainuüksi hoiatusest loobumise eesmärgil ei ole vaja komponenti JS API kaudu käsitsi lähtestada. Kasutades data-bs-dismiss="alert"
, lähtestatakse komponent automaatselt ja sellest loobutakse.
Lisateavet leiate päästikute jaotisest.
Päästikud
Vallandumise saab saavutada hoiatusedata
nupul oleva atribuudiga, nagu on näidatud allpool.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
või märguandest väljaspool asuval nupul , kasutades data-bs-target
allpool näidatud viisil:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Pange tähele, et hoiatuse sulgemine eemaldab selle DOM-ist.
meetodid
meetod | Kirjeldus |
---|---|
close |
Sulgeb hoiatuse, eemaldades selle DOM-ist. Kui elemendil on klassid .fade ja .show , kaob hoiatus enne selle eemaldamist. |
dispose |
Hävitab elemendi hoiatuse. (Eemaldab DOM-elemendile salvestatud andmed) |
getInstance |
Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud hoiatuse eksemplari, saate seda kasutada järgmiselt:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Staatiline meetod, mis tagastab DOM-i elemendiga seotud hoiatuse eksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Sündmused
Bootstrapi hoiatusplugin paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.
Sündmus | Kirjeldus |
---|---|
close.bs.alert |
Käivitub kohe, kui close eksemplari meetod kutsutakse. |
closed.bs.alert |
Käivitatakse, kui hoiatus on suletud ja CSS-i üleminekud on lõppenud. |
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()
})