عرض مصدر Bootstrap/badge

<noinclude>{{DISPLAYTITLE:الشارات Badges في إطار العمل Bootstrap}}</noinclude>
تعرّف على كيفية استخدام الأصناف المُعرَّفة مسبقًا في إطار العمل Bootstrap لإضافة علامات مميَّزة، عدَّاد صغير وشارات على عناصر في الصفحة.

== مثال ==
تتمدَّد الشّارات  (<code>badge‎.</code>) لتوافق قياس العنصُر الأب المباشر، وذلك باستخدام وحدات القيّاس <code>em</code>.

جرّب المثال التالي.<syntaxhighlight lang="html">
<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>
</syntaxhighlight>كما يمكن استخدام الشارات على الرّوابط أو الأزرار لإنشاء عدّادات.<syntaxhighlight lang="html">
<button type="button" class="btn btn-primary">
  الإشعارات <span class="badge badge-light">4</span>
</button>
</syntaxhighlight>

== تنويعات سياقيّة ==
أضف واحدًا من الأصناف المعدِّلة المذكورة أدناه لتغيير مظهر الشارة.<syntaxhighlight lang="html">
<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>

</syntaxhighlight>

==== تنبيه:توصيل المعنى إلى التقنيّات المساعدة ====
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل  المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ  مخفيّ بالصّنف <code>‎.sr-only</code>.

== الشارات المُدوَّرة ==
استخدم الصنف المعدِّل <code>‎.badge-pill</code> لجعل الشارات أكثر تدويرًا (قيمة أكبر للخاصيّة <code>border-radius</code> وحاشيّة <code>padding</code> أفقيّة إضافيّة). مفيدة إنْ كانت تعجبك شارات الإصدار الثالث من إطار العمل Bootstrap.<syntaxhighlight lang="html">
<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>


</syntaxhighlight>

== الروابط ==
يعدّ استخدام الأصناف السياقيّة <code>‎‎.badge-‎*‎</code> على عنصُر <code><a></code> طريقةً سريعة لتوفير شارات ''يمكن النقر عليها'' وتتغيّر حالتها عند التركيز Focus والحومان Hover.<syntaxhighlight lang="html">
<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>


</syntaxhighlight>

== مصادر ==
* [https://getbootstrap.com/docs/4.0/components/badge/ صفحة Badges في توثيق Bootstrap].
[[تصنيف:Bootstrap]]