Гузаштан ба мундариҷаи асосӣ Ба паймоиши ҳуҷҷатҳо гузаред
Check
in English

Огоҳӣ

Паёмҳои фикру мулоҳизаҳои контекстӣ барои амалҳои маъмулии корбарро бо шумораи зиёди паёмҳои огоҳии дастрас ва чандир пешниҳод кунед.

Дар ин саҳифа

Мисолхо

Огоҳиҳо барои ҳар дарозии матн ва инчунин тугмаи пӯшидаи ихтиёрӣ дастрасанд. Барои ороиши дуруст, яке аз ҳашт синфи зарурии контекстиро истифода баред (масалан, .alert-success). Барои хориҷ кардани сатр, плагини JavaScript -ро истифода баред .

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>
Интиқоли маъно ба технологияҳои ёрирасон

Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .visually-hiddenсинф пинҳоншуда дохил карда мешавад.

Намунаи зинда

Барои нишон додани огоҳӣ (бо сабкҳои дарунсохт пинҳоншуда барои оғоз) тугмаи зерро клик кунед, пас онро бо тугмаи пӯшидаи дарунсохт рад кунед (ва нест кунед).

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Мо JavaScript-и зеринро истифода мебарем, то намоиши ҳушдори зиндаи худро оғоз кунем:

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-linkбарои зуд таъмин кардани пайвандҳои рангаи мувофиқ дар дохили ҳама гуна огоҳӣ истифода баред.

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>

Мазмуни иловагӣ

Огоҳиҳо инчунин метавонанд унсурҳои иловагии HTML дошта бошанд, ба монанди сарлавҳаҳо, параграфҳо ва тақсимкунандагон.

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>

Нишонаҳо

Ба ҳамин монанд, шумо метавонед утилитаҳои flexbox ва Icons Bootstrap -ро барои эҷод кардани огоҳиҳо бо нишонаҳо истифода баред. Вобаста аз нишонаҳо ва мундариҷаи худ, шумо метавонед бештар утилитаҳо ё услубҳои фармоиширо илова кунед.

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>

Барои огоҳиҳои шумо зиёда аз як нишона лозим аст? Дар бораи истифодаи бештари Нишонаҳои Bootstrap ва сохтани спрайти маҳаллӣ SVG фикр кунед, то ба осонӣ ба ҳамон нишонаҳо такроран истинод кунед.

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>

Хориҷ кардан

Бо истифода аз плагини JavaScript ҳушдор, имкон дорад, ки ҳама гуна ҳушдор дар сатрро рад кард. Ин тавр аст:

  • Боварӣ ҳосил кунед, ки шумо плагини огоҳкунанда ё JavaScript-и Bootstrap-ро бор кардаед.
  • Тугмаи пӯшида ва синфро илова кунед .alert-dismissible, ки ба тарафи рости огоҳӣ иловаи иловагӣ илова мекунад ва тугмаи пӯшидаро ҷойгир мекунад.
  • Дар тугмаи пӯшида, атрибутеро илова кунед data-bs-dismiss="alert", ки функсияи JavaScript-ро ба вуҷуд меорад. Боварӣ ҳосил кунед, ки <button>унсурро бо он барои рафтори дуруст дар тамоми дастгоҳҳо истифода баред.
  • Барои аниматсия кардани огоҳиҳо ҳангоми бекор кардани онҳо, ҳатман илова кардани синфҳо .fadeва .showсинфҳо.

Шумо метавонед инро дар амал бо намоиши зинда бубинед:

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>
Вақте ки огоҳӣ рад карда мешавад, элемент аз сохтори саҳифа комилан хориҷ карда мешавад. Агар корбари клавиатура бо истифода аз тугмаи пӯшида огоҳиро рад кунад, фокуси онҳо ногаҳон гум мешавад ва вобаста ба браузер, ба оғози саҳифа/ҳуҷҷат аз нав барқарор мешавад. Аз ин сабаб, мо тавсия медиҳем, ки JavaScript-и иловагиро, ки closed.bs.alertвоқеаро гӯш мекунад ва ба таври барномавӣ focus()ба макони мувофиқтарин дар саҳифа ҷойгир мекунад, дохил кунед. Агар шумо ният доред, ки фокусро ба унсури ғайриинтерактивӣ интиқол диҳед, ки одатан фокусро қабул намекунад, боварӣ ҳосил кунед tabindex="-1", ки ба элемент илова кунед.

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, ҳушдорҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .alertбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

  --#{$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

$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

Сасс омехта

Дар якҷоягӣ бо $theme-colorsбарои сохтани синфҳои тағирдиҳандаи контекстӣ барои огоҳиҳои мо истифода мешавад.

@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%);
  }
}

Давраи Сасс

Доиравӣ, ки синфҳои тағирдиҳандаро бо alert-variant()миксин тавлид мекунад.

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

Оғоз кардан

Унсурҳоро ҳамчун огоҳӣ оғоз кунед

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Бо мақсади ягонаи рад кардани огоҳӣ, ба таври дастӣ тавассути JS API оғоз кардани ҷузъ лозим нест. Бо истифода аз data-bs-dismiss="alert", ҷузъ ба таври худкор оғоз карда мешавад ва дуруст хориҷ карда мешавад.

Барои тафсилоти бештар ба бахши триггерҳо нигаред.

Триггерҳо

Аз кор озод кардан мумкин аст бо dataатрибут дар тугмаи дохили огоҳӣ , ки дар зер нишон дода шудааст, ба даст оварда шавад:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

ё дар тугмаи берун аз огоҳӣ бо истифода аз он data-bs-targetтавре ки дар зер нишон дода шудааст:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

Дар хотир доред, ки пӯшидани огоҳӣ онро аз DOM хориҷ мекунад.

Усулҳо

Шумо метавонед як мисоли огоҳиро бо созандаи огоҳӣ созед, масалан:

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

Ин ҳушдорро водор мекунад, ки рӯйдодҳои кликро дар унсурҳои насли, ки атрибут доранд, гӯш кунад data-bs-dismiss="alert". (Ҳангоми истифодаи автоматикунонии data-api лозим нест.)

Усул Тавсифи
close Огоҳиро бо хориҷ кардани он аз DOM мепӯшонад. Агар дар элемент синфҳо .fadeва .showсинфҳо мавҷуд бошанд, огоҳӣ пеш аз хориҷ шуданаш хомӯш мешавад.
dispose Огоҳии элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
getInstance Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли ҳушдореро, ки бо унсури DOM алоқаманд аст, гиред. Масалан: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Усули статикӣ, ки як мисоли ҳушдореро, ки бо унсури DOM алоқаманд аст, бармегардонад ё дар сурати оғоз нашудани он як нав эҷод мекунад. Шумо метавонед онро чунин истифода баред: bootstrap.Alert.getOrCreateInstance(element).

Истифодаи асосӣ:

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

Ҳодисаҳо

Васлкунаки огоҳии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи ҳушдор фош мекунад.

Ҳодиса Тавсифи
close.bs.alert closeВақте ки усули инстансия даъват карда мешавад, фавран оташ мезанад .
closed.bs.alert Вақте ки ҳушдор баста шуд ва гузаришҳои CSS анҷом ёфтанд, кор карда мешавад. 
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()
})