Ogohlantirishlar
Bir nechta mavjud va moslashuvchan ogohlantirish xabarlari bilan foydalanuvchining odatiy harakatlari uchun kontekstli fikr-mulohaza xabarlarini taqdim eting.
Misollar
Ogohlantirishlar matnning istalgan uzunligi 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 JavaScript plaginidan foydalaning .
<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>
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 .visually-hidden
sinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
Jonli misol
Ogohlantirishni ko'rsatish uchun quyidagi tugmani bosing (boshlash uchun ichki uslublar bilan yashirin), so'ng o'rnatilgan yopish tugmasi yordamida uni o'chirib qo'ying (va yo'q qiling).
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Biz jonli ogohlantirish demosini ishga tushirish uchun quyidagi JavaScript-dan foydalanamiz:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'success')
})
}
Havola rangi
.alert-link
Har qanday ogohlantirish ichida mos rangli havolalarni tezda taqdim etish uchun yordamchi dastur sinfidan foydalaning .
<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>
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.
<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>
Belgilar
Xuddi shunday, piktogramma bilan ogohlantirishlar yaratish uchun flexbox yordam dasturlari va Bootstrap Icons dan foydalanishingiz mumkin. Belgilar va tarkibingizga qarab, siz qo'shimcha yordamchi dasturlar yoki maxsus uslublar qo'shishingiz mumkin.
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
</div>
Ogohlantirishlar uchun bir nechta belgi kerakmi? Xuddi shu piktogrammalarga qayta-qayta murojaat qilish uchun ko'proq Bootstrap piktogrammalaridan foydalanishni va shunga o'xshash mahalliy SVG sprite yaratishni o'ylab ko'ring.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
</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.
- Ogohlantirishning o'ng tomoniga qo'shimcha to'ldirish qo'shadigan va yopish tugmachasini joylashtiradigan yopish tugmasi va sinfni qo'shing .
.alert-dismissible
- Yopish tugmachasida
data-bs-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 . .fade
Ogohlantirishlarni o'chirishda ularni jonlantirish uchun va.show
sinflarini 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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
dasturiy jihatdan o'rnatadigan
qo'shimcha JavaScript-ni qo'shishni tavsiya qilamiz. focus()
Agar siz fokusni odatda fokusni olmaydigan interaktiv bo'lmagan elementga o'tkazishni rejalashtirmoqchi bo'lsangiz,
tabindex="-1"
elementga qo'shganingizga ishonch hosil qiling.
Sass
O'zgaruvchilar
$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
Variantli aralash
$theme-colors
Ogohlantirishlarimiz uchun kontekstli modifikator sinflarini yaratish uchun bilan birgalikda foydalaniladi.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
alert-variant()
Miksin bilan modifikator sinflarini yaratuvchi tsikl.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
JavaScript harakati
Boshlash
Elementlarni ogohlantirish sifatida ishga tushiring
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Ogohlantirishni o'chirishning yagona maqsadi uchun komponentni JS API orqali qo'lda ishga tushirish shart emas. dan foydalanish orqali data-bs-dismiss="alert"
komponent avtomatik ravishda ishga tushiriladi va to'g'ri o'chiriladi.
Batafsil ma'lumot uchun Triggerlar bo'limiga qarang.
Triggerlar
Ogohlantirishdata
tugmachasidagi atribut yordamida quyida ko'rsatilgandek ishdan bo'shatish mumkin :
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
yoki ogohlantirish tashqarisidagi tugmani data-bs-target
quyida ko'rsatilgandek ishlating:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Ogohlantirishni yopish uni DOMdan olib tashlashini unutmang.
Usullari
Usul | Tavsif |
---|---|
close |
Ogohlantirishni DOMdan olib tashlash orqali yopadi. Agar elementda .fade va .show sinflari mavjud bo'lsa, ogohlantirish o'chirilishidan oldin o'chadi. |
dispose |
Elementning ogohlantirishini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi) |
getInstance |
DOM elementi bilan bog'langan ogohlantirish namunasini olish imkonini beruvchi statik usul, siz undan quyidagicha foydalanishingiz mumkin:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
DOM elementi bilan bog'langan ogohlantirish namunasini qaytaradigan yoki ishga tushirilmagan bo'lsa, yangisini yaratadigan statik usul. Siz undan shunday foydalanishingiz mumkin:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Voqealar
Bootstrap-ning ogohlantirish plagini ogohlantirish funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.
Tadbir | Tavsif |
---|---|
close.bs.alert |
close Namuna usuli chaqirilganda darhol yonadi . |
closed.bs.alert |
Ogohlantirish yopilganda va CSS oʻtishlari tugallanganda ishga tushiriladi. |
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})