خبرداري
دستياب ۽ لچڪدار خبرداري پيغامن سان گڏ عام صارف جي عملن لاءِ لاڳاپيل راءِ جا پيغام مهيا ڪريو.
متن جي ڪنهن به ڊيگهه لاءِ الرٽ موجود آهن، انهي سان گڏ هڪ اختياري برطرفي واري بٽڻ لاءِ. مناسب اسٽائلنگ لاءِ، استعمال ڪريو اٺن مان ھڪڙو گھربل لاڳاپيل طبقن (مثال طور، .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 پلگ ان استعمال ڪندي، ڪنهن به الرٽ ان لائن کي رد ڪرڻ ممڪن آهي. هتي ڪيئن آهي:
- پڪ ڪريو ته توھان لوڊ ڪيو آھي الرٽ پلگ ان، يا مرتب ڪيل بوٽ اسٽريپ جاوا اسڪرپٽ.
- جيڪڏهن توهان اسان جي جاوا اسڪرپٽ ماخذ کان ٺاهي رهيا آهيو، ان جي ضرورت آهي
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>
جاوا اسڪرپٽ ذريعي خبرداري جي برطرفي کي فعال ڪريو:
يا انتباہ جي اندرdata
هڪ بٽڻ تي خاصيتن سان ، جيئن مٿي ڏيکاريل آهي:
نوٽ ڪريو ته انتباہ بند ڪرڻ ان کي ڊوم مان ڪڍي ڇڏيندو.
طريقو | وصف |
---|---|
$().alert() |
هڪ خبرداري ٻڌندو آهي ڪلڪ ٿيندڙ واقعن لاءِ اولاد جي عنصرن تي جيڪي data-dismiss="alert" خاصيتون آهن. (ضروري ناهي جڏهن ڊيٽا-اي پي آئي جي خودڪار شروعاتي استعمال ڪندي.) |
$().alert('close') |
ان کي DOM مان هٽائڻ سان هڪ خبرداري کي بند ڪري ٿو. جيڪڏهن .fade ۽ .show طبقن عنصر تي موجود آهن، خبردار ٿيڻ کان اڳ ختم ٿي ويندو. |
$().alert('dispose') |
هڪ عنصر جي خبرداري کي تباهه ڪري ٿو. |
بوٽ اسٽريپ جي خبرداري پلگ ان خبرداري ڪارڪردگي ۾ ڇڪڻ لاءِ ڪجھ واقعن کي بي نقاب ڪري ٿي.
واقعو | وصف |
---|---|
close.bs.alert |
اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن close مثال جو طريقو سڏيو ويندو آهي. |
closed.bs.alert |
هي واقعو فائر ڪيو ويو آهي جڏهن الرٽ بند ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |