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). Fyrir innbyggða uppsögn, notaðu viðvaranir jQuery viðbótina .

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

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í til að hegðun sé rétt í öllum tækjum.
  • .fadeVertu viss um að bæta við og .showflokkunum til að hreyfa viðvaranir þ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örun mun fjarlægja hana úr DOM.

Aðferðir

Aðferð Lýsing
$().alert() Gerir viðvörun til að hlusta eftir smellaviðburðum á 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 Þessi atburður 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 umskiptum ljúki). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})