Source

Ogohlantirishlar

Bir nechta mavjud va moslashuvchan ogohlantirish xabarlari bilan foydalanuvchining odatiy harakatlari uchun kontekstli fikr-mulohaza xabarlarini taqdim eting.

Misollar

Ogohlantirishlar istalgan uzunlikdagi matn uchun, shuningdek, ixtiyoriy yopish tugmasi uchun mavjud. To'g'ri uslublash uchun sakkizta talab qilinadigan kontekstli sinflardan birini ishlating (masalan, .alert-success). Inline ishdan bo'shatish uchun ogohlantirishlar jQuery plaginidan foydalaning .

<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>
Yordamchi texnologiyalarga ma'no etkazish

Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-onlysinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

.alert-linkHar qanday ogohlantirish ichida mos rangli havolalarni tezda taqdim etish uchun yordamchi dastur sinfidan foydalaning .

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

Qo'shimcha tarkib

Ogohlantirishlar, shuningdek, sarlavhalar, paragraflar va ajratuvchilar kabi qo'shimcha HTML elementlarini ham o'z ichiga olishi mumkin.

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

Yo'q qilish

Ogohlantirish JavaScript plaginidan foydalanib, har qanday ogohlantirishni inline o'chirib qo'yish mumkin. Mana shunday:

  • Ogohlantirish plaginini yoki kompilyatsiya qilingan Bootstrap JavaScript-ni yuklaganingizga ishonch hosil qiling.
  • Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js . Kompilyatsiya qilingan versiya buni o'z ichiga oladi.
  • .alert-dismissibleOgohlantirishning o'ng tomoniga qo'shimcha to'ldirish qo'shadigan va tugmani joylashtiradigan o'chirish tugmasi va sinfni qo'shing .close.
  • O'chirish tugmachasida data-dismiss="alert"JavaScript funksiyasini ishga tushiradigan atributni qo'shing. <button>Barcha qurilmalarda to'g'ri harakat qilish uchun u bilan elementdan foydalanganingizga ishonch hosil qiling .
  • .fadeOgohlantirishlarni o'chirishda ularni jonlantirish uchun va .showsinflarini qo'shishni unutmang .

Siz buni jonli demo bilan amalda ko'rishingiz mumkin:

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

Triggerlar

JavaScript orqali ogohlantirishni o'chirishni yoqing:

$('.alert').alert()

Yoki yuqorida ko'rsatilgandek alert ichidagi tugmadagidata atributlar bilan :

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

Ogohlantirishni yopish uni DOMdan olib tashlashini unutmang.

Usullari

Usul Tavsif
$().alert() Atributga ega boʻlgan avlod elementlaridagi bosish hodisalari haqida ogohlantirishni tinglaydi data-dismiss="alert". (Data-api-ning avtomatik ishga tushirilishidan foydalanilganda kerak emas.)
$().alert('close') Ogohlantirishni DOMdan olib tashlash orqali yopadi. Agar elementda .fadeva .showsinflari mavjud bo'lsa, ogohlantirish o'chirilishidan oldin o'chadi.
$().alert('dispose') Elementning ogohlantirishini yo'q qiladi. 
$(".alert").alert('close')

Voqealar

Bootstrap-ning ogohlantirish plagini ogohlantirish funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

Tadbir Tavsif
close.bs.alert Ushbu hodisa closemisol usuli chaqirilganda darhol ishga tushadi.
closed.bs.alert Ogohlantirish yopilgandan so'ng, bu hodisa ishga tushiriladi (CSS o'tishlari tugashini kutadi). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})