Source

Märguanded

Pakkuge tavapäraste kasutajatoimingute jaoks kontekstipõhiseid tagasisidesõnumeid käputäie saadaolevate ja paindlike hoiatusteadetega.

Näited

Märguanded on saadaval mis tahes pikkusega teksti kohta, samuti valikuline loobumisnupp. Õigeks stiiliks kasutage ühte kaheksast nõutavast kontekstiklassist (nt .alert-success). Tekstisiseseks loobumiseks kasutage hoiatuste jQuery pistikprogrammi .

<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>
Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Kasutage .alert-linkutiliitklassi, et kiiresti pakkuda sobivaid värvilisi linke mis tahes hoiatuses.

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

Täiendav sisu

Märguanded võivad sisaldada ka täiendavaid HTML-elemente, nagu pealkirjad, lõigud ja jagajad.

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

Loobumine

Hoiatuse JavaScripti pistikprogrammi abil on võimalik kõigist märguannetest loobuda. Tehke järgmist.

  • Veenduge, et oleksite laadinud hoiatusplugina või kompileeritud Bootstrap JavaScripti.
  • Kui loote meie JavaScripti allikast, nõuabutil.js see . Koostatud versioon sisaldab seda.
  • Lisage loobumisnupp ja .alert-dismissibleklass, mis lisab hoiatuse paremale küljele täiendava polsterduse ja asetab .closenupu.
  • Lisage loobumisnupul data-dismiss="alert"atribuut, mis käivitab JavaScripti funktsiooni. Kasutage seda <button>elementi kindlasti kõigis seadmetes õigeks käitumiseks.
  • Märguannete animeerimiseks nendest loobumisel lisage kindlasti klassid .fadeja ..show

Näete seda reaalajas demo abil:

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

JavaScripti käitumine

Päästikud

Lubage märguande tühistamine JavaScripti kaudu:

$('.alert').alert()

Või hoiatusesdata oleva nupu atribuutidega , nagu ülal näidatud:

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

Pange tähele, et hoiatuse sulgemine eemaldab selle DOM-ist.

meetodid

meetod Kirjeldus
$().alert() Annab hoiatuse kuulama klõpsusündmusi data-dismiss="alert"atribuuti omavatel järglastel elementidel. (Pole vajalik, kui kasutate data-api automaatset initsialiseerimist.)
$().alert('close') Sulgeb hoiatuse, eemaldades selle DOM-ist. Kui elemendil on klassid .fadeja .show, kaob hoiatus enne selle eemaldamist.
$().alert('dispose') Hävitab elemendi hoiatuse. 
$('.alert').alert('close')

Sündmused

Bootstrapi hoiatusplugin paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.

Sündmus Kirjeldus
close.bs.alert See sündmus käivitub kohe, kui closeeksemplari meetod kutsutakse.
closed.bs.alert See sündmus käivitatakse, kui hoiatus on suletud (ootab, kuni CSS-i üleminekud on lõpule viidud). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})