Source

Waarskuwings

Verskaf kontekstuele terugvoerboodskappe vir tipiese gebruikeraksies met die handvol beskikbare en buigsame waarskuwingsboodskappe.

Voorbeelde

Waarskuwings is beskikbaar vir enige lengte van teks, sowel as 'n opsionele afwys-knoppie. Vir behoorlike stilering, gebruik een van die agt vereiste kontekstuele klasse (bv. .alert-success). Vir inlyn ontslag, gebruik die waarskuwings jQuery-inprop .

<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>
Dra betekenis aan ondersteunende tegnologieë oor

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.

Gebruik die .alert-linknutsklas om vinnig bypassende gekleurde skakels binne enige waarskuwing te verskaf.

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

Bykomende inhoud

Waarskuwings kan ook bykomende HTML-elemente soos opskrifte, paragrawe en verdelers bevat.

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

Ontslaan

Deur die waarskuwing-JavaScript-inprop te gebruik, is dit moontlik om enige waarskuwing inlyn af te wys. Hier is hoe:

  • Maak seker dat jy die waarskuwing-inprop, of die saamgestelde Bootstrap JavaScript, gelaai het.
  • As jy ons JavaScript vanaf die bron bou, vereisutil.js dit . Die saamgestelde weergawe sluit dit in.
  • Voeg 'n afwys-knoppie en die .alert-dismissibleklas by, wat ekstra opvulling aan die regterkant van die waarskuwing byvoeg en die .closeknoppie posisioneer.
  • Voeg die kenmerk by op die afwys-knoppie, data-dismiss="alert"wat die JavaScript-funksionaliteit aktiveer. Maak seker dat jy die <button>element daarmee gebruik vir behoorlike gedrag op alle toestelle.
  • .fadeMaak seker dat jy die en .showklasse byvoeg om waarskuwings te animeer wanneer jy dit afwys .

Jy kan dit in aksie sien met 'n lewendige demo:

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

Snellers

Aktiveer afwysing van 'n waarskuwing via JavaScript:

$('.alert').alert()

Of met dataeienskappe op 'n knoppie binne die waarskuwing , soos hierbo gedemonstreer:

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

Let daarop dat die sluiting van 'n waarskuwing dit van die DOM sal verwyder.

Metodes

Metode Beskrywing
$().alert() Laat 'n waarskuwing luister vir klikgebeurtenisse op afstammelinge elemente wat die data-dismiss="alert"kenmerk het. (Nie nodig wanneer die data-api se outo-initialisasie gebruik word nie.)
$().alert('close') Maak 'n waarskuwing toe deur dit uit die DOM te verwyder. As die .fadeen .showklasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word.
$().alert('dispose') Vernietig 'n element se waarskuwing. 
$(".alert").alert('close')

Gebeurtenisse

Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.

Gebeurtenis Beskrywing
close.bs.alert Hierdie gebeurtenis begin onmiddellik wanneer die closeinstansiemetode geroep word.
closed.bs.alert Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir CSS-oorgange om te voltooi). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})