En son web geliştirme öğreticiler
 

Bootstrap Alerts


Uyarılar

Bootstrap önceden tanımlanmış uyarı mesajlarını oluşturmak için kolay bir yol sağlar:

× Başarı! Bu uyarı kutusu başarılı veya pozitif eylemi gösterir.
× Bilgisi! Bu uyarı kutusu nötr bilgilendirici bir değişiklik veya eylemi belirtir.
× Uyarı! Bu uyarı kutusu dikkat gerekebilir bir uyarı gösterir.
× tehlikesi! Bu uyarı kutusu tehlikeli veya olumsuz eylemi gösterir.

Uyarılar ile oluşturulan .alert dört arası sınıflardan birinde ardından sınıfın .alert-success , .alert-info , .alert-warning veya .alert-danger :

Örnek

<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>
Kendin dene "

Kapanış Uyarılar

Eklemek, uyarı mesajı kapatmak için class="close" ve data-dismiss="alert" bağlantı veya düğme elemana:

Örnek

<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>
Kendin dene "

aria-* nitelik ve &times; açıklama

Ekran okuyucu kullanan kişiler için erişilebilirliği iyileştirmek yardımcı olmak için, içermelidir aria-label="close" bir kapatma düğmesi oluştururken özellik.

&times; (×) &times; (×) yerine harfi yerine yakın düğmeler için tercih simgedir bir HTML varlıktır "x" .


Hareketli Uyarılar

.fade ve .in uyarı mesajı kapatırken sınıfları bir solma etkisi ekler:

Örnek

<div class="alert alert-success fade in">
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 »


Tamamlayın Bootstrap Uyarısı Referansı

Bütün uyarı seçenekleri, yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Uyarısı Referans .