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 .
Oddiy asosiy ogohlantirish - buni tekshiring!
Oddiy ikkinchi darajali ogohlantirish - buni tekshiring!
Muvaffaqiyat haqida oddiy ogohlantirish - buni tekshiring!
Oddiy xavf haqida ogohlantirish - buni tekshiring!
Oddiy ogohlantirish ogohlantirishi - buni tekshiring!
Oddiy ma'lumot ogohlantirish - uni tekshiring!
Oddiy yorug'lik ogohlantirishi - buni tekshiring!
Oddiy qorong'u ogohlantirish - buni tekshiring!
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.
Havola rangi
.alert-linkHar qanday ogohlantirish ichida mos rangli havolalarni tezda taqdim etish uchun yordamchi dastur sinfidan foydalaning .
Misol havolasi
bilan oddiy asosiy ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havolasi
bilan oddiy ikkinchi darajali ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havola
bilan oddiy muvaffaqiyat ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havola
bilan oddiy xavf ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havolasi
bilan oddiy ogohlantirish ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havolasi
bilan oddiy ma'lumot ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havola
bilan oddiy yorug'lik ogohlantirish
. Agar xohlasangiz, uni bosing.
Misol havolasi
bilan oddiy qorong'u ogohlantirish
. Agar xohlasangiz, uni bosing.
Qo'shimcha tarkib
Ogohlantirishlar, shuningdek, sarlavhalar, paragraflar va ajratuvchilar kabi qo'shimcha HTML elementlarini ham o'z ichiga olishi mumkin.
Barakalla!
Ha, siz ushbu muhim ogohlantirish xabarini muvaffaqiyatli o'qidingiz. Ushbu misol matni biroz uzoqroq davom etadi, shunda siz ogohlantirish ichidagi bo'shliqlar bunday kontent bilan qanday ishlashini ko'rishingiz mumkin.
Zarur bo'lganda, narsalarni chiroyli va tartibli saqlash uchun margin yordam dasturidan foydalaning.
Yo'qotilmoqda
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:
Muqaddas guakamol! Quyidagi maydonlarning ayrimlarini tekshirishingiz kerak.
JavaScript harakati
Triggerlar
JavaScript orqali ogohlantirishni o'chirishni yoqing:
Yoki yuqorida ko'rsatilgandek alert ichidagi tugmadagidata atributlar bilan :
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.
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).