Source

Ескертулер

Қол жетімді және икемді ескерту хабарларымен әдеттегі пайдаланушы әрекеттері үшін мәтінмәндік кері байланыс хабарларын қамтамасыз етіңіз.

Мысалдар

Ескертулер мәтіннің кез келген ұзындығы үшін қол жетімді, сонымен қатар қосымша жабу түймесі. Дұрыс стильдеу үшін қажетті сегіз контекстік сыныптың бірін пайдаланыңыз ( мысалы, .alert-success). Кірістірілген жұмыстан шығару үшін jQuery плагинінің ескертулерін пайдаланыңыз .

<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>
Көмекші технологияларға мән беру

Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .sr-onlyсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.

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

Қабылданбау

Ескерту 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 жүйесінен алып тастайтынын ескеріңіз.

Әдістері

Әдіс Сипаттама
$().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…
})