تنبيهات
قم بتوفير رسائل ملاحظات سياقية لإجراءات المستخدم النموذجية مع عدد قليل من رسائل التنبيه المتاحة والمرنة.
أمثلة
تتوفر التنبيهات لأي طول نصي ، بالإضافة إلى زر رفض اختياري. للحصول على تصميم مناسب ، استخدم واحدة من الفئات السياقية الثمانية المطلوبة.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 الإضافي للتنبيه ، من الممكن استبعاد أي تنبيه مضمن. إليك الطريقة:
- تأكد من تحميل البرنامج المساعد للتنبيه ، أو Bootstrap JavaScript المجمع.
- إذا كنت تقوم ببناء 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>
سلوك JavaScript
محفزات
تفعيل رفض تنبيه عبر JavaScript:
$('.alert').alert()
أو data
بسمات على زر داخل التنبيه ، كما هو موضح أعلاه:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
لاحظ أن إغلاق التنبيه سيزيله من DOM.
طُرق
طريقة | وصف |
---|---|
$().alert() |
يجعل التنبيه يستمع إلى أحداث النقر على العناصر الفرعية التي لها data-dismiss="alert" السمة. (ليس ضروريًا عند استخدام التهيئة التلقائية لـ data-api.) |
$().alert('close') |
يغلق تنبيهًا بإزالته من DOM. في حالة وجود الفئات .fade و .show على العنصر ، سيتلاشى التنبيه قبل إزالته. |
$().alert('dispose') |
يدمر تنبيه عنصر. |
$('.alert').alert('close')
الأحداث
يكشف المكون الإضافي للتنبيه في Bootstrap عن بعض الأحداث للتثبيت في وظائف التنبيه.
حدث | وصف |
---|---|
close.bs.alert |
يتم تشغيل هذا الحدث فورًا عند close استدعاء أسلوب المثيل. |
closed.bs.alert |
يتم تشغيل هذا الحدث عند إغلاق التنبيه (سينتظر اكتمال انتقالات CSS). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})