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

Огоҳӣ

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

Дар ин саҳифа

Мисолхо

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

<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синф пинҳоншуда дохил карда мешавад.

Синфи утилитро истифода баред, .alert-linkто истинодҳои рангаи мувофиқро дар ҳама гуна огоҳӣ зуд таъмин кунед.

<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 дошта бошанд, ба монанди сарлавҳаҳо, параграфҳо ва тақсимкунандагон.

<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 барои эҷод кардани огоҳиҳо бо нишонаҳо истифода баред. Вобаста аз нишонаҳо ва мундариҷаи худ, шумо метавонед бештар утилитаҳо ё услубҳои фармоиширо илова кунед.

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

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

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

Хориҷ кардан

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

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

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

<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", ки ба элемент илова кунед.

Сасс

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

$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) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .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

Триггерҳо

Қатъи огоҳиро тавассути JavaScript фаъол созед:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

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

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

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

Усулҳо

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

var myAlert = document.getElementById('myAlert')
var 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) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Ҳодисаҳо

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

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