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 پلگ ان کا استعمال کرتے ہوئے، کسی بھی الرٹ ان لائن کو برخاست کرنا ممکن ہے۔ یہ ہے طریقہ:

  • یقینی بنائیں کہ آپ نے الرٹ پلگ ان، یا مرتب کردہ بوٹسٹریپ جاوا اسکرپٹ لوڈ کیا ہے۔
  • اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہے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>

جاوا اسکرپٹ کا رویہ

محرکات

جاوا اسکرپٹ کے ذریعے الرٹ کی برخاستگی کو فعال کریں:

$('.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"انتساب رکھتے ہیں۔ (ڈیٹا-اے پی آئی کی خودکار ابتداء کا استعمال کرتے وقت ضروری نہیں ہے۔)
$().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…
})