Source

Upozornění

Poskytujte kontextové zprávy zpětné vazby pro typické akce uživatele pomocí několika dostupných a flexibilních výstražných zpráv.

Příklady

Upozornění jsou k dispozici pro libovolnou délku textu, stejně jako volitelné tlačítko pro zrušení. Pro správný styl použijte jednu z osmi požadovaných kontextových tříd (např. .alert-success). Pro okamžité zrušení použijte plugin jQuery pro upozornění .

<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>
Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě.

Použijte .alert-linktřídu utility k rychlému poskytnutí odpovídajících barevných odkazů v rámci jakéhokoli upozornění.

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

Další obsah

Upozornění mohou také obsahovat další prvky HTML, jako jsou nadpisy, odstavce a oddělovač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>

Propouštění

Pomocí pluginu JavaScriptu pro upozornění je možné zrušit jakékoli vložené upozornění. Zde je postup:

  • Ujistěte se, že jste načetli výstražný plugin nebo kompilovaný Bootstrap JavaScript.
  • Pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js . Kompilovaná verze to zahrnuje.
  • Přidejte tlačítko pro zrušení a .alert-dismissibletřídu, která přidá další odsazení napravo od upozornění a umístí .closetlačítko.
  • Na tlačítko Zavřít přidejte data-dismiss="alert"atribut, který spouští funkci JavaScript. Ujistěte se, že <button>prvek s ním používáte pro správné chování napříč všemi zařízeními.
  • Chcete-li animovat upozornění při jejich zavírání, nezapomeňte přidat třídy .fadea .show.

Můžete to vidět v akci s živou ukázkou:

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

Chování JavaScriptu

Spouštěče

Povolit odmítnutí upozornění pomocí JavaScriptu:

$('.alert').alert()

Nebo s dataatributy na tlačítku v rámci upozornění , jak je ukázáno výše:

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

Všimněte si, že zavřením výstrahy ji odstraníte z DOM.

Metody

Metoda Popis
$().alert() Umožňuje upozornění naslouchat událostem kliknutí na podřízené prvky, které mají tento data-dismiss="alert"atribut. (Není nutné při použití automatické inicializace rozhraní data-api.)
$().alert('close') Zavře upozornění jeho odstraněním z DOM. Pokud jsou na prvku přítomny třídy .fadea .show, výstraha před odstraněním zmizí.
$().alert('dispose') Zničí výstrahu prvku. 
$('.alert').alert('close')

Události

Zásuvný modul výstrah Bootstrap odhaluje několik událostí pro zapojení do funkce výstrah.

událost Popis
close.bs.alert Tato událost se spustí okamžitě při closevolání metody instance.
closed.bs.alert Tato událost se spustí, když bude výstraha uzavřena (bude čekat na dokončení přechodů CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})