ئاگاھلاندۇرۇش
ئىشلەتكىلى بولىدىغان ۋە جانلىق بولغان ئاگاھلاندۇرۇش ئۇچۇرى بىلەن تىپىك ئىشلەتكۈچى ھەرىكىتى ئۈچۈن مەزمۇن خاراكتېرلىك ئىنكاس ئۇچۇرلىرى بىلەن تەمىنلەڭ.
مىساللار
ھەر قانداق ئۇزۇنلۇقتىكى ئاگاھلاندۇرۇش ، شۇنداقلا ئىختىيارىي بىكار قىلىش كۇنۇپكىسى بار. مۇۋاپىق ئۇسلۇب ئۈچۈن ، تەلەپ قىلىنغان سەككىز مەزمۇننىڭ بىرىنى ئىشلىتىڭ (مەسىلەن ، .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">×</span>
  </button>
</div>JavaScript ھەرىكىتى
Triggers
JavaScript ئارقىلىق ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇڭ:
$('.alert').alert()ياكى ئاگاھلاندۇرۇش ئىچىدىكىdata بىر كۇنۇپكىدىكى خاسلىق بىلەن يۇقىرىدا كۆرسىتىلگەندەك:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>دىققەت ، ئاگاھلاندۇرۇشنى تاقاش ئۇنى DOM دىن ئۆچۈرۈۋېتىدۇ.
Methods
| ئۇسۇل | چۈشەندۈرۈش | 
|---|---|
| $().alert() | خاسلىقى بار ئەۋلاد ئېلېمېنتلىرىدىكى چېكىلىش ھادىسىلىرىنى ئاگاھلاندۇرۇش ئاڭلايدۇ data-dismiss="alert". (Data-api نىڭ ئاپتوماتىك قوزغىتىشنى ئىشلەتكەندە لازىم ئەمەس.) | 
| $().alert('close') | ئۇنى DOM دىن ئۆچۈرۈپ ئاگاھلاندۇرۇشنى تاقايدۇ. ئەگەر ئېلېمېنتلار .fadeۋە.showدەرسلەر بولسا ، ئاگاھلاندۇرۇش ئۆچۈرۈلۈشتىن بۇرۇن يوقىلىدۇ. | 
| $().alert('dispose') | ئېلېمېنتنىڭ ئاگاھلاندۇرۇشىنى يوقىتىدۇ. | 
$(".alert").alert('close')Events
Bootstrap نىڭ ئاگاھلاندۇرۇش قىستۇرمىسى ئاگاھلاندۇرۇش ئىقتىدارىغا باغلانغان بىر قانچە ھادىسىنى ئاشكارىلىدى.
| Event | چۈشەندۈرۈش | 
|---|---|
| close.bs.alert | closeمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ . | 
| closed.bs.alert | ئاگاھلاندۇرۇش تاقالغاندىن كېيىن بۇ پائالىيەت ئېتىۋېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ). | 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})