انتباہات
مٹھی بھر دستیاب اور لچکدار انتباہی پیغامات کے ساتھ عام صارف کی کارروائیوں کے لیے متعلقہ تاثرات کے پیغامات فراہم کریں۔
متن کی کسی بھی لمبائی کے ساتھ ساتھ اختیاری برخاست بٹن کے لیے الرٹس دستیاب ہیں۔ مناسب انداز کے لیے، آٹھ مطلوبہ سیاق و سباق کی کلاسوں میں سے ایک استعمال کریں (مثلاً، .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
بٹن پر اوصاف کے ساتھ ، جیسا کہ اوپر دکھایا گیا ہے:
نوٹ کریں کہ الرٹ بند کرنے سے یہ DOM سے ہٹ جائے گا۔
طریقہ | تفصیل |
---|---|
$().alert() |
انتباہی سننے والے عناصر پر کلک ایونٹس کے لیے جو data-dismiss="alert" انتساب رکھتے ہیں۔ (ڈیٹا-اے پی آئی کی خودکار ابتداء کا استعمال کرتے وقت ضروری نہیں ہے۔) |
$().alert('close') |
ایک الرٹ کو DOM سے ہٹا کر بند کرتا ہے۔ اگر عنصر پر .fade اور .show کلاسز موجود ہیں تو، الرٹ ہٹانے سے پہلے ختم ہو جائے گا۔ |
$().alert('dispose') |
ایک عنصر کے انتباہ کو تباہ کرتا ہے۔ |
بوٹسٹریپ کا الرٹ پلگ ان انتباہی فعالیت میں شامل ہونے کے لیے چند واقعات کو بے نقاب کرتا ہے۔
تقریب | تفصیل |
---|---|
close.bs.alert |
یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب close مثال کا طریقہ کہا جاتا ہے۔ |
closed.bs.alert |
یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب الرٹ بند ہو جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔ |