Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
Check
in English

Ogohlantirishlar

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

Ushbu sahifada

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 .

html 
<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-hiddensinf 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).

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

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

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.
  • 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 .
  • .fadeOgohlantirishlarni o'chirishda ularni jonlantirish uchun va .showsinflarini qo'shishni unutmang .

Siz buni jonli demo bilan amalda ko'rishingiz mumkin:

html 
<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>
Ogohlantirish o'chirilganda, element sahifa tuzilishidan butunlay o'chiriladi. Agar klaviatura foydalanuvchisi ogohlantirishni yopish tugmasi yordamida rad etsa, ularning diqqat markazida to'satdan yo'qoladi va brauzerga qarab, sahifa/hujjat boshiga tiklanadi. Shu sababli, voqeani tinglaydigan va sahifadagi eng mos joyni closed.bs.alertdasturiy 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.

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida, ogohlantirishlar endi .alertreal vaqt rejimini yaxshilash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass o'zgaruvchilari

$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

Sass aralashmasi

$theme-colorsOgohlantirishlarimiz uchun kontekstli modifikator sinflarini yaratish uchun bilan birgalikda foydalaniladi.

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Sass halqasi

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

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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-targetquyida 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

Ogohlantirish konstruktori bilan ogohlantirish namunasini yaratishingiz mumkin, masalan:

const bsAlert = new bootstrap.Alert('#myAlert')

Bu atributga ega bo'lgan avlod elementlaridagi bosish hodisalari haqida ogohlantirishni tinglaydi data-bs-dismiss="alert". (Data-api-ning avtomatik ishga tushirilishidan foydalanilganda kerak emas.)

Usul Tavsif
close Ogohlantirishni DOMdan olib tashlash orqali yopadi. Agar elementda .fadeva .showsinflari 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. Masalan: 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).

Asosiy foydalanish:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Voqealar

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

Tadbir Tavsif
close.bs.alert closeNamuna usuli chaqirilganda darhol yonadi .
closed.bs.alert Ogohlantirish yopilganda va CSS oʻtishlari tugallanganda ishga tushiriladi. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})