Bootstrap/badge

تعرّف على كيفية استخدام الأصناف المُعرَّفة مسبقًا في إطار العمل 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>

تنويعات سياقيّة

أضف واحدًا من الأصناف المعدِّلة المذكورة أدناه لتغيير مظهر الشارة.

<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-‎*‎ على عنصُر <a> طريقةً سريعة لتوفير شارات يمكن النقر عليها وتتغيّر حالتها عند التركيز (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>

مصادر

• صفحة Badges في توثيق Bootstrap.