HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Alerts

❮ Předchozí Další ❯

Upozornění

Bootstrap poskytuje snadný způsob, jak vytvořit předdefinované výstražné zprávy:

× Úspěch! Toto výstražné pole označuje úspěšnou nebo pozitivní akci.
× Informace! Toto výstražné pole označuje neutrální informativní změnu nebo akci.
× Varování! Toto výstražné pole označuje varování, které může vyžadovat pozornost.
× Nebezpečí! Toto výstražné pole označuje nebezpečnou nebo potenciálně negativní akci.

Výstrahy se vytvářejí s .alerttřídou, za kterou následuje jedna ze čtyř kontextových tříd .alert-success, .alert-infonebo .alert-warning: .alert-danger

Příklad

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Odkazy na upozornění

Přidejte alert-linktřídu ke všem odkazům uvnitř pole upozornění a vytvořte „odpovídající barevné odkazy“:

Úspěch! Měli byste si přečíst tuto zprávu .
Informace! Měli byste si přečíst tuto zprávu .
Varování! Měli byste si přečíst tuto zprávu .
Nebezpečí! Měli byste si přečíst tuto zprávu .

Příklad

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Ukončení upozornění

× Kliknutím na symbol "x" vpravo mě zavřete.

Chcete-li zavřít výstražnou zprávu, přidejte .alert-dismissible třídu do kontejneru výstrahy. Poté přidejte class="close"a data-dismiss="alert" k odkazu nebo prvku tlačítka (po kliknutí na toto pole upozornění zmizí).

Příklad

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Atribut aria-* a × vysvětlení

Chcete-li zlepšit přístupnost pro uživatele, kteří používají programy pro čtení z obrazovky, měli byste při vytváření tlačítka pro zavření zahrnout atribut aria-label="close".

× (×) je entita HTML, která je upřednostňovanou ikonou pro tlačítka pro zavření, spíše než písmeno „x“.
Seznam všech entit HTML naleznete v naší Referenční příručce entit HTML .

Animovaná upozornění

× Kliknutím na symbol "x" vpravo mě zavřete. "vyblednu".

Třídy .fadea .inpřidávají při zavření výstražné zprávy efekt slábnutí:

Příklad

<div class="alert alert-danger fade in">

Otestujte se pomocí cvičení

Cvičení:

Chcete-li zobrazit výsledek úspěšné akce, přidejte třídu „upozornění“ Bootstrap.

<div class="">
  Success!
</div>

Kompletní referenční příručka Bootstrap Alert

Úplný přehled všech možností, metod a událostí výstrah najdete v naší Referenční příručce výstrah Bootstrap JS .


❮ Předchozí Další ❯