Source

Alerts

Колдонуучунун типтүү аракеттери үчүн контексттик пикир билдирүүлөрүн жеткиликтүү жана ийкемдүү эскертүү билдирүүлөрү менен камсыз кылыңыз.

Мисалдар

Эскертүүлөр тексттин каалаган узундугу үчүн жеткиликтүү, ошондой эле кошумча четке кагуу баскычы. Туура стилдөө үчүн талап кылынган сегиз контексттик класстын бирин колдонуңуз (мисалы, .alert-success). Inline иштен чыгаруу үчүн, alerts 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 плагинин колдонуу менен, ар кандай эскертүүлөрдү саптан чыгарууга болот. Бул жерде:

  • Эскертүү плагинин же компиляцияланган Bootstrap JavaScriptти жүктөгөнүңүздү текшериңиз.
  • Эгер сиз биздин 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дан алып салыңыз.

Методдор

Метод Description
$().alert() Атрибуту бар тукум элементтериндеги чыкылдатуу окуяларын угуу үчүн эскертүү берет data-dismiss="alert". (Data-api автоматтык түрдө инициализациясын колдонууда зарыл эмес.)
$().alert('close') Эскертүүнү DOMдан алып салуу менен жаап салат. Эгер элементте .fadeжана .showкласстары бар болсо, эскертүү ал өчүрүлгөнгө чейин өчүп калат.
$().alert('dispose') Элементтин эскертүүсүн жок кылат. 
$(".alert").alert('close')

Окуялар

Bootstrap'тин эскертүү плагини эскертүү функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя Description
close.bs.alert Бул окуя closeинстанция ыкмасы чакырылганда дароо күйөт.
closed.bs.alert Бул окуя эскертүү жабылгандан кийин өчүрүлөт (CSS өтүүлөрү аяктаганга чейин күтөт). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})