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 .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a 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.

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

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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.

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

<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, .showuyarı 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…
})