Alerte
Bootstrap oferă o modalitate ușoară de a crea mesaje de alertă predefinite:
Alertele sunt create cu .alert
clasa, urmată de una din cele patru clase contextuale .alert-success
, .alert-info
, .alert-warning
sau .alert-danger
:
Exemplu
<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>
Încearcă - l singur » Alerte de închidere
Pentru a închide mesajul de alertă, adăugați class="close"
și data-dismiss="alert"
la un link sau un element de buton:
Exemplu
<div class="alert alert-success">
<a href="#"
class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Încearcă - l singur » aria-* atribut și × explicaţie
Pentru a ajuta la îmbunătățirea accesibilității pentru persoanele care folosesc cititoare de ecran, ar trebui să includă aria-label="close" atribut, atunci când se creează un buton de închidere.
× (×) × (×) este o entitate HTML care este pictograma preferată pentru butoane de închidere, mai degrabă decât litera "x" .
Alerte animate
.fade
și .in
clase adaugă un efect de decolorare atunci când se închide mesajul de alertă:
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 »
Completați Bootstrap Alertă de referință
Pentru o referință completă a tuturor opțiunilor de alertă, metode și evenimente, du - te la nostru Bootstrap JS Alarma de referință .