Source

Viðvaranir

Gefðu samhengisskilaboðum fyrir dæmigerðar notendaaðgerðir með handfylli af tiltækum og sveigjanlegum viðvörunarskilaboðum.

Dæmi

Viðvaranir eru fáanlegar fyrir hvaða lengd texta sem er, sem og valfrjáls hafnahnappur. Til að útlit sé rétt, notaðu einn af átta nauðsynlegum samhengisflokkum (td .alert-success). Notaðu viðvaranir jQuery viðbótina fyrir innfellda uppsögn .

<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>
Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.

Notaðu .alert-linkgagnsemisflokkinn til að gefa fljótt samsvarandi litaða tengla í hvaða viðvörun sem er.

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

Viðbótarefni

Viðvaranir geta einnig innihaldið fleiri HTML þætti eins og fyrirsagnir, málsgreinar og skilrúm.

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

Að vísa frá

Með því að nota alert JavaScript viðbótina er hægt að hafna hvaða viðvörun sem er innbyggð. Svona:

  • Vertu viss um að þú hafir hlaðið viðvörunarviðbótinni eða samsettu Bootstrap JavaScript.
  • Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það . Samsett útgáfa inniheldur þetta.
  • Bættu við afvísunarhnappi og .alert-dismissiblebekknum, sem bætir aukafyllingu hægra megin við viðvörunina og staðsetur .closehnappinn.
  • Bættu við data-dismiss="alert"eigindinni á hafnahnappinum, sem kallar á JavaScript virknina. Gakktu úr skugga um að þú notir <button>þáttinn með því fyrir rétta hegðun í öllum tækjum.
  • .fadeVertu viss um að bæta við og .showflokkunum til að gera viðvaranir hreyfingar þegar þeim er vísað frá.

Þú getur séð þetta í aðgerð með lifandi kynningu:

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

JavaScript hegðun

Kveikjur

Virkjaðu frávísun á viðvörun með JavaScript:

$('.alert').alert()

Eða með dataeiginleikum á hnappi innan viðvörunarinnar , eins og sýnt er hér að ofan:

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

Athugaðu að lokun viðvörunar mun fjarlægja hana úr DOM.

Aðferðir

Aðferð Lýsing
$().alert() Gerir viðvörun til að hlusta eftir smellitilvikum á afkomandi þáttum sem hafa data-dismiss="alert"eiginleikann. (Ekki nauðsynlegt þegar þú notar sjálfvirka frumstillingu gagnaforritsins.)
$().alert('close') Lokar viðvörun með því að fjarlægja hana úr DOM. Ef .fadeog .showflokkarnir eru til staðar á frumefninu mun viðvörunin hverfa áður en hún er fjarlægð.
$().alert('dispose') Eyðir viðvörun frumefnis. 
$('.alert').alert('close')

Viðburðir

Viðvörunarviðbót Bootstrap afhjúpar nokkra atburði til að tengjast viðvörunarvirkni.

Viðburður Lýsing
close.bs.alert Þetta atvik ræsir strax þegar closetilviksaðferðin er kölluð.
closed.bs.alert Þessi atburður er ræstur þegar viðvöruninni hefur verið lokað (bíður eftir að CSS umbreytingum ljúki). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})