Alerts
Obezbedite kontekstualne povratne poruke za tipične radnje korisnika uz pregršt dostupnih i fleksibilnih poruka upozorenja.
Primjeri
Upozorenja su dostupna za bilo koju dužinu teksta, kao i opciono dugme za zatvaranje. Za pravilan stil, koristite jednu od osam potrebnih kontekstualnih klasa (npr. .alert-success
). Za inline odbacivanje koristite JavaScript dodatak za upozorenja .
<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>
Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hidden
klasom.
Živi primjer
Kliknite na dugme ispod da prikažete upozorenje (sakriveno umetnutim stilovima za početak), a zatim ga odbacite (i uništite) pomoću ugrađenog dugmeta za zatvaranje.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Koristimo sljedeći JavaScript da pokrenemo našu demonstraciju upozorenja uživo:
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')
})
}
Boja veze
Koristite .alert-link
klasu uslužnih programa za brzo pružanje odgovarajućih veza u boji unutar bilo kojeg upozorenja.
<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>
Dodatni sadržaj
Upozorenja također mogu sadržavati dodatne HTML elemente poput naslova, pasusa i razdjelnika.
Dobro urađeno!
O da, uspješno ste pročitali ovu važnu poruku upozorenja. Ovaj primjer teksta će trajati malo duže kako biste mogli vidjeti kako razmak unutar upozorenja funkcionira s ovom vrstom sadržaja.
Kad god vam je potrebno, obavezno koristite pomoćne programe za margine da bi stvari bile lijepe i uredne.
<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>
Ikone
Slično, možete koristiti flexbox uslužne programe i Bootstrap ikone za kreiranje upozorenja sa ikonama. Ovisno o vašim ikonama i sadržaju, možda ćete htjeti dodati više uslužnih programa ili prilagođenih stilova.
<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>
Trebate više od jedne ikone za vaša upozorenja? Razmislite o korišćenju više Bootstrap ikona i pravljenju lokalnog SVG sprite-a kako biste lako referencirali iste ikone više puta.
<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>
Odbacivanje
Koristeći JavaScript dodatak za upozorenje, moguće je odbaciti bilo koje upozorenje u tekstu. Evo kako:
- Budite sigurni da ste učitali dodatak za upozorenje ili kompajlirani Bootstrap JavaScript.
- Dodajte dugme za zatvaranje i
.alert-dismissible
klasu, koja dodaje dodatno polje desno od upozorenja i pozicionira dugme za zatvaranje. - Na dugme za zatvaranje dodajte
data-bs-dismiss="alert"
atribut koji pokreće JavaScript funkcionalnost. Obavezno koristite<button>
element s njim za pravilno ponašanje na svim uređajima. - Da biste animirali upozorenja kada ih odbacite, obavezno dodajte
.fade
i.show
klase.
Ovo možete vidjeti u akciji uz demo uživo:
<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
događaj i programski postavlja
focus()
na najprikladniju lokaciju na stranici. Ako planirate premjestiti fokus na neinteraktivni element koji obično ne prima fokus, obavezno dodajte
tabindex="-1"
elementu.
Sass
Varijable
$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
Varijanta mixin
Koristi se u kombinaciji sa $theme-colors
za kreiranje klasa modifikatora konteksta za naša upozorenja.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Petlja
Petlja koja generiše klase modifikatora sa alert-variant()
miksinom.
// 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);
}
}
JavaScript ponašanje
Inicijaliziraj
Inicijalizirajte elemente kao upozorenja
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Za jedinu svrhu odbacivanja upozorenja, nije potrebno inicijalizirati komponentu ručno preko JS API-ja. Korištenjem data-bs-dismiss="alert"
, komponenta će se automatski inicijalizirati i pravilno odbaciti.
Pogledajte odjeljak o okidačima za više detalja.
Okidači
Otpuštanje se može postići pomoću data
atributa na dugmetu unutar upozorenja kao što je prikazano u nastavku:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
ili na dugme izvan upozorenja koristeći data-bs-target
kao što je prikazano u nastavku:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Imajte na umu da će zatvaranje upozorenja ukloniti iz DOM-a.
Metode
Metoda | Opis |
---|---|
close |
Zatvara upozorenje uklanjanjem iz DOM-a. Ako su klase .fade i .show prisutne na elementu, upozorenje će nestati prije nego što se ukloni. |
dispose |
Uništava upozorenje elementa. (Uklanja pohranjene podatke na DOM elementu) |
getInstance |
Statička metoda koja vam omogućava da dobijete instancu upozorenja koja je povezana sa DOM elementom, možete je koristiti ovako:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statička metoda koja vraća instancu upozorenja pridruženu DOM elementu ili kreira novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Događaji
Bootstrap-ov dodatak za upozorenje izlaže nekoliko događaja za spajanje na funkcionalnost upozorenja.
Događaj | Opis |
---|---|
close.bs.alert |
Aktivira se odmah kada close se pozove metoda instance. |
closed.bs.alert |
Aktivira se kada je upozorenje zatvoreno i CSS prijelazi su završeni. |
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()
})