الشارات (Badges)

مستندات وأمثلة للشارات، وهي مكون صغير للعد والتصنيف.

في هذه الصفحة

أمثلة

تتوسع الشارات لتناسب حجم العنصر الأب المباشر باستخدام أحجام خطوط نسبية ووحدات em. وبدءاً من الإصدار v5، لم تعد الشارات تحتوي على أنماط التركيز (focus) أو التحويم (hover) للروابط.

العناوين (Headings)

Example heading New

html

<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>

الأزرار

يمكن استخدام الشارات كجزء من الروابط أو الأزرار لتوفير عداد.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

لاحظ أنه بناءً على كيفية استخدامها، قد تكون الشارات مربكة لمستخدمي قارئات الشاشة والتقنيات المساعدة المماثلة. وبينما يوفر تنسيق الشارات إشارة بصرية لغرضها، سيتم عرض المحتوى الخاص بالشارة فقط لهؤلاء المستخدمين. وبناءً على الموقف المحدد، قد تبدو هذه الشارات ككلمات أو أرقام إضافية عشوائية في نهاية جملة أو رابط أو زر.

ما لم يكن السياق واضحاً (كما هو الحال في مثال "Notifications"، حيث من المفهوم أن "4" هو عدد التنبيهات)، فكر في تضمين سياق إضافي باستخدام قطعة نصية إضافية مخفية بصرياً.

الموضع/المكان (Positioned)

استخدم الأدوات المساعدة لتعديل .badge ووضعها في زاوية الرابط أو الزر.

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

يمكنك أيضاً استبدال الفئة .badge ببعض الأدوات المساعدة الإضافية بدون عداد للحصول على مؤشر أكثر عمومية.

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

ألوان الخلفية

تمت الإضافة في الإصدار v5.2.0

قم بتعيين background-color مع لون أمامي متباين باستخدام مساعدات .text-bg-{color} الخاصة بنا. سابقاً، كان من الضروري الربط يدوياً بين اختيارك من أدوات .text-{color} ([[docsref:/utilities/colors]]) و .bg-{color} ([[docsref:/utilities/background]]) للتنسيق، والتي لا يزال بإمكانك استخدامها إذا كنت تفضل ذلك.

Primary Secondary Success Danger Warning Info Light Dark

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

الشارات الدائرية (Pill badges)

استخدم الفئة المساعدة .rounded-pill لجعل الشارات أكثر استدارة مع border-radius أكبر.

Primary Secondary Success Danger Warning Info Light Dark

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج Bootstrap المتطور في استخدام متغيرات CSS، تستخدم الـ badges الآن متغيرات CSS محلية على badge. لتحسين التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass، لذا فإن تخصيص Sass لا يزال مدعوماً أيضاً.

scss/_badge.scss

--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

متغيرات الـ (Sass)

scss/_variables.scss

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);