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 الإضافي للتنبيه ، من الممكن استبعاد أي تنبيه مضمن. إليك الطريقة:

  • تأكد من تحميل البرنامج المساعد للتنبيه ، أو 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">&times;</span>
  </button>
</div>

سلوك JavaScript

محفزات

تفعيل رفض تنبيه عبر JavaScript:

$('.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"السمة. (ليس ضروريًا عند استخدام التهيئة التلقائية لـ 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…
})