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 قىستۇرمىسىنى ئىشلىتىپ ، ھەر قانداق ئاگاھلاندۇرۇش لىنىيىسىنى ئەمەلدىن قالدۇرغىلى بولىدۇ. بۇ يەردە:

  • ئاگاھلاندۇرۇش قىستۇرمىسىنى ياكى تۈزۈلگەن 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 ھەرىكىتى

Triggers

JavaScript ئارقىلىق ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇڭ:

$('.alert').alert()

ياكى ئاگاھلاندۇرۇش ئىچىدىكىdata بىر كۇنۇپكىدىكى خاسلىق بىلەن يۇقىرىدا كۆرسىتىلگەندەك:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</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…
})