ئاگاھلاندۇرۇش
ئىشلەتكىلى بولىدىغان ۋە جانلىق بولغان ئاگاھلاندۇرۇش ئۇچۇرى بىلەن تىپىك ئىشلەتكۈچى ھەرىكىتى ئۈچۈن مەزمۇن خاراكتېرلىك ئىنكاس ئۇچۇرلىرى بىلەن تەمىنلەڭ.
مىساللار
ھەر قانداق ئۇزۇنلۇقتىكى ئاگاھلاندۇرۇش ، شۇنداقلا ئىختىيارىي بىكار قىلىش كۇنۇپكىسى بار. مۇۋاپىق ئۇسلۇب ئۈچۈن ، تەلەپ قىلىنغان سەككىز دەرسلىكنىڭ بىرىنى ئىشلىتىڭ (مەسىلەن ، .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...
})