Source

Opozorila

Zagotovite kontekstualna povratna sporočila za tipična dejanja uporabnikov s peščico razpoložljivih in prilagodljivih opozorilnih sporočil.

Primeri

Opozorila so na voljo za poljubno dolžino besedila, kot tudi izbirni gumb za opustitev. Za pravilno oblikovanje uporabite enega od osmih zahtevanih kontekstualnih razredov (npr. .alert-success). Za zavrnitev v vrstici uporabite vtičnik opozoril jQuery .

To je primarno opozorilo – preverite!

To je sekundarno opozorilo – preverite!

To je opozorilo o uspehu – preverite!

To je opozorilo o nevarnosti – preverite!

To je opozorilo – preverite!

To je informacijsko opozorilo – preverite!

To je svetlobno opozorilo – preverite!

To je temno opozorilo – preverite!

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Barva povezave

Uporabite .alert-linkrazred pripomočkov za hitro zagotavljanje ujemajočih se barvnih povezav znotraj katerega koli opozorila.

To je primarno opozorilo s primerom povezave . Kliknite, če želite.

To je sekundarno opozorilo s primerom povezave . Kliknite, če želite.

To je opozorilo o uspehu s primerom povezave . Kliknite, če želite.

To je opozorilo o nevarnosti s primerom povezave . Kliknite, če želite.

To je opozorilo s primerom povezave . Kliknite, če želite.

To je informacijsko opozorilo s primerom povezave . Kliknite, če želite.

To je svetlo opozorilo s primerom povezave . Kliknite, če želite.

To je temno opozorilo s primerom povezave . Kliknite, če želite.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Dodatne vsebine

Opozorila lahko vsebujejo tudi dodatne elemente HTML, kot so naslovi, odstavki in ločnice.

Dobro opravljeno!

Vau ja, uspešno ste prebrali to pomembno opozorilno sporočilo. Ta primer besedila se bo izvajal nekoliko dlje, da boste lahko videli, kako razmik znotraj opozorila deluje s tovrstno vsebino.

Kadarkoli boste morali, ne pozabite uporabiti pripomočkov za margine, da bodo stvari lepe in urejene.

<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>

Odpuščanje

Z uporabo vtičnika JavaScript za opozorila je mogoče opustiti katero koli opozorilo v vrstici. Evo kako:

Prepričajte se, da ste naložili vtičnik za opozorila ali preveden JavaScript Bootstrap.
Če gradite naš JavaScript iz izvorne kode, zahtevautil.js . Prevedena različica to vključuje.
Dodajte gumb za opustitev in .alert-dismissiblerazred, ki doda dodatno oblazinjenje na desni strani opozorila in umesti .closegumb.
Na gumb za opustitev dodajte data-dismiss="alert"atribut, ki sproži funkcijo JavaScript. Ne pozabite uporabiti <button>elementa z njim za pravilno delovanje v vseh napravah.
Če želite animirati opozorila, ko jih opustite, dodajte razrede .fadein ..show

To lahko vidite v akciji s predstavitvijo v živo:

Sveti guacamole! Preverite nekatera od teh polj spodaj.

<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">&times;</span>
  </button>
</div>

obnašanje JavaScripta

Sprožilci

Omogoči opustitev opozorila prek JavaScripta:

$('.alert').alert()

Ali z dataatributi na gumbu znotraj opozorila , kot je prikazano zgoraj:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Upoštevajte, da boste z zaprtjem opozorila odstranili iz DOM.

Metode

Metoda	Opis
`$().alert()`	Naredi opozorilo, da posluša dogodke klikov na podrejenih elementih, ki imajo `data-dismiss="alert"`atribut. (Ni potrebno pri uporabi samodejne inicializacije data-api.)
`$().alert('close')`	Zapre opozorilo tako, da ga odstrani iz DOM. Če sta v elementu prisotna razreda `.fade`in `.show`, bo opozorilo zbledelo, preden bo odstranjeno.
`$().alert('dispose')`	Uniči opozorilo elementa.

$(".alert").alert('close')

Dogodki

Bootstrapov vtičnik za opozorila razkriva nekaj dogodkov za priključitev na funkcijo opozorila.

Dogodek	Opis
`close.bs.alert`	Ta dogodek se sproži takoj, ko `close`se pokliče metoda primerka.
`closed.bs.alert`	Ta dogodek se sproži, ko je bilo opozorilo zaprto (počakal bo, da se zaključijo prehodi CSS).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})