خبرتیاوې
د لاسي موجود او انعطاف وړ خبرتیا پیغامونو سره د عادي کارونکي عملونو لپاره د متناسب فیډبیک پیغامونه چمتو کړئ.
خبرتیاوې د هر متن اوږدوالي لپاره شتون لري ، په بیله بیا د اختیاري ګوښه کولو تڼۍ. د سم سټایل کولو لپاره، د اتو اړینو شرایطو ټولګیو څخه یو وکاروئ (د بیلګې په توګه، .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>
د خبرتیا جاواسکریپټ پلگ ان په کارولو سره، دا ممکنه ده چې هر ډول خبرتیا انلاین رد کړئ. دلته دی څنګه:
- ډاډ ترلاسه کړئ چې تاسو د خبرتیا پلگ ان پورته کړی، یا د بوټسټریپ جاوا سکریپټ تالیف کړی.
- که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لري
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">×</span>
</button>
</div>
د جاواسکریپټ له لارې د خبرتیا ګوښه کول فعال کړئ:
یا د خبرتیا دننه پهdata
تڼۍ کې د ځانګړتیاوو سره ، لکه څنګه چې پورته ښودل شوي:
په یاد ولرئ چې د خبرتیا بندول به دا د DOM څخه لرې کړي.
طریقه | تفصیل |
---|---|
$().alert() |
د نسلي عناصرو په اړه د کلیک پیښو لپاره خبرتیا اوریدل کیږي کوم چې data-dismiss="alert" ځانګړتیا لري. (ضرورت نلري کله چې د ډیټا-اپي اتومات پیل کول وکاروئ.) |
$().alert('close') |
د DOM څخه د لرې کولو له لارې خبرتیا بندوي. که چیرې .fade او .show ټولګي په عنصر کې شتون ولري، خبرتیا به مخکې له دې چې لیرې شي له منځه ځي. |
$().alert('dispose') |
د یو عنصر خبرتیا له منځه وړي. |
د بوټسټریپ خبرتیا پلگ ان د خبرتیا فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي.
پیښه | تفصیل |
---|---|
close.bs.alert |
دا پیښه سمدلاسه اوریږي کله چې د close مثال میتود ویل کیږي. |
closed.bs.alert |
دا پیښه له مینځه وړل کیږي کله چې خبرتیا تړل شوې وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |