upozorenja
Omogućite kontekstualne povratne poruke za tipične radnje korisnika s nekoliko dostupnih i fleksibilnih poruka upozorenja.
Primjeri
Dostupna su upozorenja za bilo koju duljinu teksta, kao i izborni gumb za odbacivanje. Za pravilan stil koristite jednu od osam potrebnih kontekstualnih klasa (npr. .alert-success
). Za inline odbacivanje upotrijebite dodatak upozorenja jQuery .
<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 daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-only
klasom.
Boja veze
Upotrijebite .alert-link
klasu pomoć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 kao što su naslovi, odlomci i razdjelnici.
Dobro napravljeno!
Vau da, uspješno ste pročitali ovu važnu poruku upozorenja. Ovaj primjer teksta trajat će malo duže kako biste mogli vidjeti kako razmak unutar upozorenja funkcionira s ovom vrstom sadržaja.
Kad god zatrebate, svakako koristite pomoćne programe za margine kako 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>
Odbacivanje
Korištenjem JavaScript dodatka za upozorenje, moguće je odbaciti bilo koje upozorenje u tekstu. Evo kako:
- Provjerite jeste li učitali dodatak upozorenja ili kompilirani Bootstrap JavaScript.
- Ako gradite naš JavaScript iz izvora, to zahtijeva
util.js
. Sastavljena verzija uključuje ovo. - Dodajte gumb za odbacivanje i
.alert-dismissible
klasu, čime se dodaje dodatna ispuna s desne strane upozorenja i pozicionira.close
gumb. - Na gumb za odbacivanje dodajte
data-dismiss="alert"
atribut koji pokreće JavaScript funkciju. Obavezno koristite<button>
element s njim za ispravno ponašanje na svim uređajima. - Da biste animirali upozorenja kada ih odbacujete, svakako dodajte
.fade
i.show
klase.
Ovo možete vidjeti na djelu 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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
JavaScript ponašanje
Okidači
Omogućite odbacivanje upozorenja putem JavaScripta:
$('.alert').alert()
Ili s data
atributima na gumbu unutar upozorenja , kao što je prikazano gore:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Imajte na umu da će zatvaranje upozorenja ukloniti ono iz DOM-a.
Metode
metoda | Opis |
---|---|
$().alert() |
Osluškuje upozorenje za događaje klikova na elementima potomcima koji imaju data-dismiss="alert" atribut. (Nije potrebno kada se koristi auto-inicijalizacija data-api-ja.) |
$().alert('close') |
Zatvara upozorenje uklanjanjem iz DOM-a. Ako su klase .fade i .show prisutne na elementu, upozorenje će nestati prije nego što se ukloni. |
$().alert('dispose') |
Uništava upozorenje elementa. |
$('.alert').alert('close')
Događaji
Bootstrapov dodatak za uzbunu izlaže nekoliko događaja za spajanje na funkciju upozorenja.
Događaj | Opis |
---|---|
close.bs.alert |
Ovaj događaj aktivira se odmah kada close se pozove metoda instance. |
closed.bs.alert |
Ovaj se događaj pokreće kada se upozorenje zatvori (pričekat će se da se CSS prijelazi završe). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})