Source

Upozornenia

Poskytujte kontextové správy so spätnou väzbou pre typické akcie používateľov pomocou niekoľkých dostupných a flexibilných výstražných správ.

Príklady

Upozornenia sú k dispozícii pre ľubovoľnú dĺžku textu, ako aj voliteľné tlačidlo na zrušenie. Pre správny štýl použite jednu z ôsmich požadovaných kontextových tried (napr. .alert-success). Na okamžité zrušenie použite doplnok jQuery pre upozornenia .

<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>
Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .sr-onlytriedou.

Použite .alert-linktriedu utility na rýchle poskytnutie zodpovedajúcich farebných odkazov v rámci akéhokoľvek upozornenia.

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

Ďalší obsah

Upozornenia môžu obsahovať aj ďalšie prvky HTML, ako sú nadpisy, odseky a oddeľovače.

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

Prepúšťa sa

Pomocou doplnku JavaScript s upozornením je možné zrušiť akékoľvek priame upozornenie. Tu je postup:

  • Uistite sa, že ste si načítali výstražný doplnok alebo skompilovaný Bootstrap JavaScript.
  • Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js . Kompilovaná verzia to zahŕňa.
  • Pridajte tlačidlo na zrušenie a .alert-dismissibletriedu, ktorá pridá extra výplň napravo od upozornenia a umiestni .closetlačidlo.
  • Na tlačidlo Zrušiť pridajte data-dismiss="alert"atribút, ktorý spustí funkciu JavaScript. Uistite sa, že <button>prvok s ním používate na správne správanie vo všetkých zariadeniach.
  • Ak chcete animovať upozornenia pri ich zrušení, nezabudnite pridať triedy .fadea ..show

Môžete to vidieť v akcii so živou ukážkou:

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

Správanie JavaScriptu

Spúšťače

Povoliť zrušenie upozornenia prostredníctvom JavaScriptu:

$('.alert').alert()

Alebo s dataatribútmi na tlačidle v rámci upozornenia , ako je uvedené vyššie:

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

Upozorňujeme, že zatvorením upozornenia ho odstránite z DOM.

Metódy

Metóda Popis
$().alert() Zabezpečí, aby výstraha počúvala udalosti kliknutia na podradené prvky, ktoré majú tento data-dismiss="alert"atribút. (Nie je potrebné pri použití automatickej inicializácie data-api.)
$().alert('close') Zatvorí upozornenie jeho odstránením z DOM. Ak sú na prvku prítomné triedy .fadea .show, výstraha pred odstránením zmizne.
$().alert('dispose') Zničí výstrahu prvku. 
$(".alert").alert('close')

Diania

Výstražný doplnok Bootstrap odhaľuje niekoľko udalostí na pripojenie k funkcii výstrahy.

Udalosť Popis
close.bs.alert Táto udalosť sa spustí okamžite po closezavolaní metódy inštancie.
closed.bs.alert Táto udalosť sa spustí po zatvorení upozornenia (bude čakať na dokončenie prechodov CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})