Upozornění Bootstrap 4
Bootstrap 4 Alerts
Bootstrap 4 poskytuje snadný způsob, jak vytvořit předdefinované výstražné zprávy:
Výstrahy se vytvářejí s .alerttřídou, za kterou následuje jedna z kontextových tříd .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondarynebo .alert-light:.alert-dark
Příklad
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive 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“:
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í
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">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Tip: × (×) 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í
Třídy .fadea .showpřidávají při zavření výstražné zprávy efekt slábnutí:
Příklad
<div class="alert alert-danger
alert-dismissible fade show">
Dokončete referenční upozornění Bootstrap 4
Úplný přehled všech možností výstrah, metod a událostí naleznete v naší Referenční příručce výstrah Bootstrap 4 JS .