Ultimele tutoriale de dezvoltare web
 

Bootstrap Alerts


Alerte

Bootstrap oferă o modalitate ușoară de a crea mesaje de alertă predefinite:

× Succes! Această casetă de avertizare indică o acțiune de succes sau pozitiv.
× Info! Această casetă de avertizare indică o schimbare sau o acțiune informativă neutră.
× Atenție! Această casetă de avertizare indică un avertisment care ar putea avea nevoie de atenție.
× Pericol! Această casetă de avertizare indică o acțiune periculoasă sau potențial negativ.

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">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Încearcă - l singur »

aria-* atribut și &times; 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.

&times; (×) &times; (×) 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ă:

Exemplu

<div class="alert alert-success fade in">
Încearcă - l singur »

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ță .