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>

ګوښه کول

د خبرتیا جاواسکریپټ پلگ ان په کارولو سره، دا ممکنه ده چې هر ډول خبرتیا انلاین رد کړئ. دلته دی څنګه:

  • ډاډ ترلاسه کړئ چې تاسو د خبرتیا پلگ ان پورته کړی، یا د بوټسټریپ جاوا سکریپټ تالیف کړی.
  • که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js . په تالیف شوي نسخه کې دا شامل دي.
  • د ګوښه کولو تڼۍ او .alert-dismissibleټولګي اضافه کړئ، کوم چې د خبرتیا ښي خوا ته اضافي پیډینګ اضافه کوي او .closeتڼۍ موقعیت لري.
  • د ګوښه کولو تڼۍ کې، data-dismiss="alert"خاصیت اضافه کړئ، کوم چې د جاواسکریپټ فعالیت هڅوي. ډاډ ترلاسه کړئ چې <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>

جاواسکریپټ چلند

محرکونه

د جاواسکریپټ له لارې د خبرتیا ګوښه کول فعال کړئ:

$('.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"ځانګړتیا لري. (ضرورت نلري کله چې د ډیټا-Api اتومات پیل کول وکاروئ.)
$().alert('close') د DOM څخه د لرې کولو له لارې خبرتیا بندوي. که چیرې .fadeاو .showټولګي په عنصر کې شتون ولري، خبرتیا به مخکې له دې چې لیرې شي له منځه ځي.
$().alert('dispose') د یو عنصر خبرتیا له منځه وړي.
$(".alert").alert('close')

پیښې

د بوټسټریپ خبرتیا پلگ ان د خبرتیا فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي.

پیښه تفصیل
close.bs.alert دا پیښه سمدلاسه اوریږي کله چې د closeمثال میتود ویل کیږي.
closed.bs.alert دا پیښه له مینځه وړل کیږي کله چې خبرتیا بنده شوې وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})