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>

برطرف ڪرڻ

الرٽ 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 رويي

ٽاريندڙ

جاوا اسڪرپٽ ذريعي خبرداري جي برطرفي کي فعال ڪريو:

$('.alert').alert()

يا انتباہ جي اندرdata هڪ بٽڻ تي خاصيتن سان ، جيئن مٿي ڏيکاريل آهي:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

نوٽ ڪريو ته انتباہ بند ڪرڻ ان کي ڊوم مان ڪڍي ڇڏيندو.

طريقا

طريقو وصف
$().alert() هڪ خبرداري ٻڌندو آهي ڪلڪ ٿيندڙ واقعن لاءِ اولاد جي عنصرن تي جيڪي data-dismiss="alert"خاصيتون آهن. (ضروري ناهي جڏهن ڊيٽا-اي پي آئي جي خودڪار شروعاتي استعمال ڪندي.)
$().alert('close') ان کي DOM مان هٽائڻ سان هڪ خبرداري کي بند ڪري ٿو. جيڪڏهن .fade۽ .showطبقن عنصر تي موجود آهن، خبردار ٿيڻ کان اڳ ختم ٿي ويندو.
$().alert('dispose') هڪ عنصر جي خبرداري کي تباهه ڪري ٿو.
$(".alert").alert('close')

واقعا

بوٽ اسٽريپ جي خبرداري پلگ ان خبرداري ڪارڪردگي ۾ ڇڪڻ لاءِ ڪجھ واقعن کي بي نقاب ڪري ٿي.

واقعو وصف
close.bs.alert اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن closeمثال جو طريقو سڏيو ويندو آهي.
closed.bs.alert هي واقعو فائر ڪيو ويو آهي جڏهن الرٽ بند ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})