Source

Абвесткі

Забяспечце кантэкстныя паведамленні зваротнай сувязі для тыповых дзеянняў карыстальнікаў з дапамогай некалькіх даступных і гнуткіх паведамленняў абвестак.

Прыклады

Абвесткі даступныя для любой даўжыні тэксту, а таксама дадатковая кнопка адхілення. Для правільнага стылю выкарыстоўвайце адзін з васьмі неабходных кантэкстных класаў (напрыклад, .alert-success). Для ўбудаванага адхілення выкарыстоўвайце плагін абвестак jQuery .

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

Дадатковы кантэнт

Абвесткі могуць таксама ўтрымліваць дадатковыя элементы 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>

Звальненне

З дапамогай плагіна JavaScript для папярэджанняў можна адхіліць любое папярэджанне ў радку. Вось як:

  • Пераканайцеся, што вы загрузілі плагін абвестак або скампіляваны JavaScript Bootstrap.
  • Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуеццаutil.js . Скампіляваная версія ўключае гэта.
  • Дадайце кнопку адхілення і .alert-dismissibleклас, які дадае дадатковую абіўку справа ад абвесткі і размяшчае .closeкнопку.
  • Да кнопкі адхілення дадайце data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Паводзіны JavaScript

Трыгеры

Уключыць адхіленне абвесткі праз JavaScript:

$('.alert').alert()

Ці з дапамогай dataатрыбутаў на кнопцы ў абвестцы , як паказана вышэй:

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

Звярніце ўвагу, што закрыццё папярэджання выдаліць яго з DOM.

Метады

Метад Апісанне
$().alert() Праслухоўвае папярэджанне аб падзеях пстрычак на элементах-нашчадках, якія маюць data-dismiss="alert"атрыбут. (Не абавязкова пры выкарыстанні аўтаматычнай ініцыялізацыі data-api.)
$().alert('close') Закрывае папярэджанне, выдаляючы яго з DOM. Калі ў элеменце прысутнічаюць класы .fadeі .show, папярэджанне згасне, перш чым ён будзе выдалены.
$().alert('dispose') Знішчае абвестку элемента. 
$(".alert").alert('close')

Падзеі

Убудова абвестак Bootstrap паказвае некалькі падзей для падключэння да функцыянальнасці абвестак.

Падзея Апісанне
close.bs.alert Гэта падзея запускаецца неадкладна пры closeвыкліку метаду асобніка.
closed.bs.alert Гэта падзея запускаецца, калі абвестка была закрыта (будзе чакаць завяршэння пераходаў CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})