Source

Alerts

Biede kontekstuele feedbackberjochten foar typyske brûkersaksjes mei it hantsjefol beskikbere en fleksibele warskôgingsberjochten.

Foarbylden

Alerts binne beskikber foar elke lingte fan tekst, lykas ek in opsjoneel ôfwize knop. Foar goede styling, brûk ien fan de acht fereaske kontekstuele klassen (bgl. .alert-success). Foar inline ûntslach, brûk de warskôgings jQuery plugin .

<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>
Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

Brûk de .alert-linknutklasse om fluch oerienkommende kleurde keppelings te leverjen binnen elke warskôging.

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

Oanfoljende ynhâld

Alerts kinne ek ekstra HTML-eleminten befetsje lykas kopteksten, paragrafen en dividers.

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

It ûntslaan

Mei it JavaScript-plugin foar warskôging is it mooglik om alle warskôgings ynline te ferwiderjen. Hjir is hoe:

  • Wês wis dat jo de warskôgingsplugin hawwe laden, of it kompilearre Bootstrap JavaScript.
  • As jo ​​​​ús JavaScript bouwe fanút boarne, fereasketutil.js it . De gearstalde ferzje befettet dit.
  • Foegje in ûntslach knop en de .alert-dismissibleklasse, dy't foeget ekstra padding oan de rjochterkant fan de warskôging en posysjes de .closeknop.
  • Foegje op 'e knop ôfwize it data-dismiss="alert"attribút ta, dat de JavaScript-funksjonaliteit trigger. Wês wis dat jo it <button>elemint dermei brûke foar goed gedrach oer alle apparaten.
  • Om warskôgings te animearjen by it ôfwizen fan se, wês wis dat jo de .fadeen .showklassen tafoegje.

Jo kinne dit yn aksje sjen mei in live 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 gedrach

Triggers

Skeakelje it ûntslach fan in warskôging fia JavaScript yn:

$('.alert').alert()

Of mei dataattributen op in knop binnen de warskôging , lykas hjirboppe toand:

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

Tink derom dat it sluten fan in warskôging it fan 'e DOM sil fuortsmite.

Metoaden

Metoade Beskriuwing
$().alert() Makket in warskôging te harkjen nei klik-eveneminten op ôfstammende eleminten dy't it data-dismiss="alert"attribút hawwe. (Net nedich by it brûken fan de automatyske inisjalisaasje fan de data-api.)
$().alert('close') Slút in warskôging troch it te ferwiderjen fan 'e DOM. As de .fadeen .showklassen binne oanwêzich op it elemint, de warskôging sil fade út foardat it wurdt fuortsmiten.
$().alert('dispose') Ferneatiget de warskôging fan in elemint. 
$('.alert').alert('close')

Eveneminten

De warskôgingsplugin fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.

Barren Beskriuwing
close.bs.alert Dit evenemint fjoer fuortendaliks as de closeeksimplaar metoade wurdt oanroppen.
closed.bs.alert Dit evenemint wurdt ûntslein as de warskôging is sletten (sil wachtsje op CSS-oergongen om te foltôgjen). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})