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 .

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

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

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

Dodatne vsebine

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

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

<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 .fadein .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 closese 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…
})