الشارات Badges في إطار العمل Bootstrap
تعرّف على كيفية استخدام الأصناف المُعرَّفة مسبقًا في إطار العمل Bootstrap لإضافة علامات مميَّزة أو عدَّاد صغير أوشارات على عناصر في الصفحة.
مثال
تتمدَّد الشّارات (badge.) لتوافق قياس العنصُر الأب المباشر، وذلك باستخدام وحدات القيّاس em.
جرّب المثال التالي.
<h1>مثال على ترويسة <span class="badge badge-secondary">جديد</span></h1>
<h2>مثال على ترويسة <span class="badge badge-secondary">جديد</span></h2>
<h3>مثال على ترويسة <span class="badge badge-secondary">جديد</span></h3>
<h4>مثال على ترويسة <span class="badge badge-secondary">جديد</span></h4>
<h5>مثال على ترويسة <span class="badge badge-secondary">جديد</span></h5>
<h6>مثال على ترويسة <span class="badge badge-secondary">جديد</span></h6>
كما يمكن استخدام الشارات على الرّوابط أو الأزرار لإنشاء عدّادات.
<button type="button" class="btn btn-primary">
الإشعارات <span class="badge badge-light">4</span>
</button>
قد تكون الشارات مربكة لمستخدمي برامج قراءة الشاشة والتقنيات المساعدة المماثلة. صحيح أنّ تنسيق الشارات يوفر إشارات بصرية تبيّن الغرض منها، لكن لن يحصل مستخدمو برامج قراءة الشاشة والتقنيات المساعدة إلا على محتوى الشارة حافيًا. هذا قد يجعلها تبدوا كعبارات من كلمات وأرقام عشوائية في نهاية الجملة أو الرابط أو الزر. ما لم يكن السياق واضحًا (كما هو الحال مع مثال "الإشعارات" ) ، يُفضَّل تضمين سياق إضافي مع الجزء المخفي.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">رسائل غير مقروءة</span>
</button>
تنويعات سياقيّة
أضف واحدًا من الأصناف المعدِّلة المذكورة أدناه لتغيير مظهر الشارة.
<span class="badge badge-primary">أوليّ</span>
<span class="badge badge-secondary">ثانويّ</span>
<span class="badge badge-success">نجاح</span>
<span class="badge badge-danger">خطر</span>
<span class="badge badge-warning">تحذير</span>
<span class="badge badge-info">معلومة</span>
<span class="badge badge-light">خفيف</span>
<span class="badge badge-dark">غامق</span>
توصيل المعنى إلى التقنيّات المساعدة
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف .sr-only.
الشارات المُدوَّرة
استخدم الصنف المعدِّل .badge-pill لجعل الشارات أكثر تدويرًا (قيمة أكبر للخاصيّة border-radius وحاشيّة padding أفقيّة إضافيّة). مفيدة إنْ كانت تعجبك شارات الإصدار الثالث من إطار العمل Bootstrap.
<span class="badge badge-pill badge-primary">أوّلي</span>
<span class="badge badge-pill badge-secondary">ثانويّ</span>
<span class="badge badge-pill badge-success">نجاح</span>
<span class="badge badge-pill badge-danger">خطر</span>
<span class="badge badge-pill badge-warning">تحذير</span>
<span class="badge badge-pill badge-info">معلومة</span>
<span class="badge badge-pill badge-light">خفيف</span>
<span class="badge badge-pill badge-dark">غامق</span>
الروابط
يعدّ استخدام الأصناف السياقيّة .badge-* على عنصُر طريقةً سريعة لتوفير شارات يمكن النقر عليها وتتغيّر حالتها عند التركيز (focus) ومرور المؤشر فوقها (hover).
<a href="#" class="badge badge-primary">أوليّ</a>
<a href="#" class="badge badge-secondary">ثانويّ</a>
<a href="#" class="badge badge-success">نجاح</a>
<a href="#" class="badge badge-danger">خطر</a>
<a href="#" class="badge badge-warning">تحذير</a>
<a href="#" class="badge badge-info">معلومة</a>
<a href="#" class="badge badge-light">خفيف</a>
<a href="#" class="badge badge-dark">غامق</a>