Source

Алертс

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

Примери

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

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
Преношење значења помоћним технологијама

Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .sr-onlyкласом.

Користите .alert-linkкласу услужних програма да бисте брзо обезбедили одговарајуће везе у боји унутар било ког упозорења.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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>

Одбацивање

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

  • Уверите се да сте учитали додатак за упозорење или компајлирани Боотстрап ЈаваСцрипт.
  • Ако градите наш ЈаваСцрипт из извора, он захтеваutil.js . Састављена верзија укључује ово.
  • Додајте дугме за одбацивање и .alert-dismissibleкласу, која додаје додатно поље са десне стране упозорења и позиционира .closeдугме.
  • На дугме за одбацивање додајте data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

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

Триггерс

Омогућите одбацивање упозорења путем ЈаваСцрипт-а:

$('.alert').alert()

Или са dataатрибутима на дугмету у упозорењу , као што је приказано изнад:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

Методе

Метод Опис
$().alert() Прави да упозорење ослушкује догађаје клика на елементе потомке који имају data-dismiss="alert"атрибут. (Није неопходно када се користи аутоматска иницијализација дата-апи-ја.)
$().alert('close') Затвара упозорење уклањањем из ДОМ-а. Ако су класе .fadeи .showприсутне на елементу, упозорење ће нестати пре него што се уклони.
$().alert('dispose') Уништава упозорење елемента. 
$(".alert").alert('close')

Догађаји

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

Догађај Опис
close.bs.alert Овај догађај се покреће одмах када closeсе позове метод инстанце.
closed.bs.alert Овај догађај се покреће када је упозорење затворено (сачекаће да се ЦСС транзиције доврше). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})