Source

uyarılar

Bir avuç kullanılabilir ve esnek uyarı mesajıyla tipik kullanıcı eylemleri için bağlamsal geri bildirim mesajları sağlayın.

Örnekler

Herhangi bir metin uzunluğu için uyarılar ve isteğe bağlı bir kapatma düğmesi mevcuttur. Uygun stil için, gerekli sekiz bağlamsal sınıftan birini kullanın (örneğin, .alert-success). Satır içi işten çıkarma için, uyarıları jQuery eklentisini kullanın .

Basit bir birincil uyarı—şuna bir bakın!

Basit bir ikincil uyarı—şuna bir bakın!

Basit bir başarı uyarısı—şuna bir bakın!

Basit bir tehlike uyarısı—şuna bir bakın!

Basit bir uyarı uyarısı - kontrol edin!

Basit bir bilgi uyarısı—şuna bir bakın!

Basit bir ışık uyarısı—şuna bir bakın!

Basit bir karanlık uyarı - şuna bir bakın!

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Bağlantı rengi

.alert-linkHerhangi bir uyarı içinde hızlı bir şekilde eşleşen renkli bağlantılar sağlamak için yardımcı program sınıfını kullanın .

Örnek bir bağlantı içeren basit bir birincil uyarı . İstersen bir tıkla.

Örnek bir bağlantı içeren basit bir ikincil uyarı . İstersen bir tıkla.

Örnek bir bağlantıyla basit bir başarı uyarısı . İstersen bir tıkla.

Örnek bir bağlantı ile basit bir tehlike uyarısı . İstersen bir tıkla.

Örnek bir bağlantı ile basit bir uyarı uyarısı . İstersen bir tıkla.

Örnek bir bağlantı içeren basit bir bilgi uyarısı . İstersen bir tıkla.

Örnek bir bağlantı ile basit bir ışık uyarısı . İstersen bir tıkla.

Örnek bir bağlantı ile basit bir karanlık uyarı . İstersen bir tıkla.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Ek içerik

Uyarılar ayrıca başlıklar, paragraflar ve ayırıcılar gibi ek HTML öğeleri içerebilir.

Aferin!

Aww evet, bu önemli uyarı mesajını başarıyla okudunuz. Bu örnek metin, bir uyarı içindeki aralığın bu tür içerikle nasıl çalıştığını görebilmeniz için biraz daha uzun sürecektir.

Ne zaman ihtiyacınız olursa, işleri güzel ve düzenli tutmak için kenar boşluğu yardımcı programlarını kullandığınızdan emin olun.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

kapatılıyor

Uyarı JavaScript eklentisini kullanarak, satır içi herhangi bir uyarıyı kapatmak mümkündür. İşte nasıl:

Uyarı eklentisini veya derlenmiş Bootstrap JavaScript'i yüklediğinizden emin olun.
JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, . Derlenmiş sürüm bunu içerir.
.alert-dismissibleUyarının sağına ekstra dolgu ekleyen ve düğmeyi konumlandıran bir kapatma düğmesi ve sınıf ekleyin .close.
Kapat düğmesine data-dismiss="alert"JavaScript işlevini tetikleyen özelliği ekleyin. <button>Tüm cihazlarda uygun davranış için öğeyi onunla birlikte kullandığınızdan emin olun .
Uyarıları kapatırken canlandırmak için .fadeve .showsınıflarını eklediğinizden emin olun.

Bunu canlı bir demo ile çalışırken görebilirsiniz:

Kutsal guakamole! Aşağıdaki alanlardan bazılarını kontrol etmelisiniz.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript davranışı

tetikleyiciler

JavaScript aracılığıyla bir uyarının kapatılmasını etkinleştir:

$('.alert').alert()

Veya yukarıda gösterildiği gibi , uyarı içindekidata bir düğmedeki niteliklerle :

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Bir uyarıyı kapatmanın onu DOM'dan kaldıracağını unutmayın.

yöntemler

Yöntem	Tanım
`$().alert()`	`data-dismiss="alert"`Özniteliğe sahip alt öğelerdeki tıklama olaylarını dinleyen bir uyarı yapar . (Data-api'nin otomatik başlatmasını kullanırken gerekli değildir.)
`$().alert('close')`	DOM'den kaldırarak bir uyarıyı kapatır. `.fade`Öğede ve sınıfları varsa, `.show`uyarı kaldırılmadan önce kaybolur.
`$().alert('dispose')`	Bir öğenin uyarısını yok eder.

$('.alert').alert('close')

Olaylar

Bootstrap'in uyarı eklentisi, uyarı işlevine bağlanmak için birkaç olayı ortaya çıkarır.

Etkinlik	Tanım
`close.bs.alert`	Bu olay, `close`örnek yöntemi çağrıldığında hemen tetiklenir.
`closed.bs.alert`	Bu olay, uyarı kapatıldığında tetiklenir (CSS geçişlerinin tamamlanmasını bekler).

$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})