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

Önyükleme Uyarıları

❮ Öncesi Sonraki ❯

uyarılar

Bootstrap, önceden tanımlanmış uyarı mesajları oluşturmanın kolay bir yolunu sunar:

× Başarı! Bu uyarı kutusu, başarılı veya olumlu bir eylemi belirtir.
× Bilgi! Bu uyarı kutusu, tarafsız bir bilgi değişikliği veya eylemi gösterir.
× Uyarı! Bu uyarı kutusu, dikkat edilmesi gerekebilecek bir uyarıyı belirtir.
× Tehlike! Bu uyarı kutusu, tehlikeli veya potansiyel olarak olumsuz bir eylemi belirtir.

Uyarılar, sınıfla birlikte oluşturulur ve .alertardından dört bağlamsal sınıftan .alert-successbiri .alert-info, .alert-warningveya .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>

Uyarı Bağlantıları

alert-link"Eşleşen renkli bağlantılar" oluşturmak için sınıfı uyarı kutusunun içindeki herhangi bir bağlantıya ekleyin :

Başarı! Bu mesajı okumalısınız .
Bilgi! Bu mesajı okumalısınız .
Uyarı! Bu mesajı okumalısınız .
Tehlike! Bu mesajı okumalısınız .

Örnek

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

Kapanış Uyarıları

× Beni kapatmak için sağdaki "x" sembolüne tıklayın.

Uyarı mesajını kapatmak için .alert-dismissible uyarı kapsayıcısına bir sınıf ekleyin. Ardından class="close"ve data-dismiss="alert" bir bağlantı veya bir düğme öğesi ekleyin (buna tıkladığınızda uyarı kutusu kaybolur).

Örnek

<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>

aria-* özniteliği ve × açıklama

Ekran okuyucu kullanan kişilerin erişilebilirliğini iyileştirmeye yardımcı olmak için, bir kapat düğmesi oluştururken aria-label="close" özniteliğini eklemelisiniz.

&zamanlar; (×), kapatma düğmeleri için "x" harfi yerine tercih edilen simge olan bir HTML varlığıdır.
Tüm HTML Varlıklarının bir listesi için HTML Varlıkları Referansımızı ziyaret edin .

Animasyonlu Uyarılar

× Beni kapatmak için sağdaki "x" sembolüne tıklayın. "Söneceğim".

ve sınıfları .fade, .inuyarı mesajını kapatırken bir solma efekti ekler:

Örnek

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

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

Başarılı bir eylemin sonucunu görüntülemek için bir Bootstrap "alert" sınıfı ekleyin.

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

Eksiksiz Bootstrap Uyarı Referansı

Tüm uyarı seçeneklerinin, yöntemlerinin ve olaylarının eksiksiz bir referansı için Bootstrap JS Alert Reference sayfamıza gidin .


❮ Öncesi Sonraki ❯