Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

Алертс

Обезбедите контекстуалне повратне поруке за типичне радње корисника уз прегршт доступних и флексибилних порука упозорења.

На овој страници

Примери

Упозорења су доступна за било коју дужину текста, као и опционо дугме за затварање. За правилан стил, користите једну од осам потребних контекстуалних класа (нпр. .alert-success). За инлине отпуштање користите ЈаваСцрипт додатак за упозорења .

хтмл 
<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класом.

Живи пример

Кликните на дугме испод да бисте приказали упозорење (сакривено уметнутим стиловима за почетак), а затим га одбаците (и уништите) помоћу уграђеног дугмета за затварање.

хтмл 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Користимо следећи ЈаваСцрипт да покренемо нашу демонстрацију упозорења уживо:

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класу услужних програма да бисте брзо обезбедили одговарајуће везе у боји унутар било ког упозорења.

хтмл 
<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>

Додатни садржај

Упозорења такође могу да садрже додатне ХТМЛ елементе попут наслова, пасуса и разделника.

хтмл 
<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>

Иконе

Слично томе, можете користити флекбок услужне програме и иконе за покретање да бисте креирали упозорења са иконама. У зависности од ваших икона и садржаја, можда ћете желети да додате више услужних програма или прилагођених стилова.

хтмл 
<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>

Треба вам више од једне иконе за ваша упозорења? Размислите о коришћењу више Боотстрап икона и прављењу локалног СВГ сприте-а тако да лако позивате на исте иконе више пута.

хтмл 
<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>

Одбацивање

Користећи ЈаваСцрипт додатак за упозорење, могуће је одбацити било које упозорење у тексту. Ево како:

  • Уверите се да сте учитали додатак за упозорење или компајлирани Боотстрап ЈаваСцрипт.
  • Додајте дугме за затварање и .alert-dismissibleкласу, која додаје додатно поље са десне стране упозорења и позиционира дугме за затварање.
  • На дугме за затварање додајте data-bs-dismiss="alert"атрибут који покреће ЈаваСцрипт функционалност. Обавезно користите <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>
Када се упозорење одбаци, елемент се потпуно уклања из структуре странице. Ако корисник тастатуре одбаци упозорење помоћу дугмета за затварање, његов фокус ће изненада бити изгубљен и, у зависности од претраживача, ресетован на почетак странице/документа. Из тог разлога, препоручујемо да укључите додатни ЈаваСцрипт који слуша closed.bs.alertдогађај и програмски поставља focus()на најприкладнију локацију на страници. Ако планирате да преместите фокус на неинтерактивни елемент који обично не добија фокус, обавезно додајте tabindex="-1"елементу.

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, упозорења сада користе локалне ЦСС променљиве укључене .alertза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

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

Сасс варијабле

$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);
  }
}

ЈаваСцрипт понашање

Иницијализујте

Иницијализујте елементе као упозорења

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

За једину сврху одбацивања упозорења, није потребно ручно иницијализовати компоненту преко ЈС АПИ-ја. Коришћењем 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>

Имајте на уму да ће затварање упозорења уклонити из ДОМ-а.

Методе

Можете креирати инстанцу упозорења помоћу конструктора упозорења, на пример:

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

Ово чини да упозорење ослушкује догађаје клика на елементе потомке који имају data-bs-dismiss="alert"атрибут. (Није неопходно када се користи аутоматска иницијализација дата-апи-ја.)

Метод Опис
close Затвара упозорење уклањањем из ДОМ-а. Ако су класе .fadeи .showприсутне на елементу, упозорење ће нестати пре него што се уклони.
dispose Уништава упозорење елемента. (Уклања сачуване податке на ДОМ елементу)
getInstance Статичка метода која вам омогућава да добијете инстанцу упозорења која је повезана са ДОМ елементом. На пример: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Статичка метода која враћа инстанцу упозорења која је повезана са ДОМ елементом или креира нову у случају да није иницијализована. Можете га користити овако: bootstrap.Alert.getOrCreateInstance(element).

Основна употреба:

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

Догађаји

Боотстрап додатак за упозорење излаже неколико догађаја за повезивање са функцијом упозорења.

Догађај Опис
close.bs.alert Активира се одмах када closeсе позове метод инстанце.
closed.bs.alert Активира се када је упозорење затворено и ЦСС прелази су завршени. 
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()
})