تلوين الشارات الدلالية | الشارات في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تخلّى Bootstrap 5 عن كلاسات الألوان الخاصة بالشارات في الإصدارات القديمة لصالح منظومة الأدوات الموحدة! وفي الإصدار 5.3 أصبح الأسلوب القياسي الأذكى لتلوين الشارات هو دمج .badge مع كلاسات .text-bg-primary حتى .text-bg-dark؛ لأنها تضبط لون الخلفية وتختار تلقائياً نصاً أبيض على الألوان الداكنة ونصاً داكناً عالي الوضوح على الخلفيات الفاتحة مثل الأصفر والسماوي.

الصف 2 كود برمجي

HTML

<div class="d-flex flex-wrap gap-2">
  <span class="badge text-bg-primary">Primary</span>
  <span class="badge text-bg-success">Active</span>
  <span class="badge text-bg-warning">Pending</span>
  <span class="badge text-bg-info">Syncing</span>
  <span class="badge text-bg-danger">Failed</span>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Contextual Badge Colors تلوين الشارات الدلالية

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الشارات في بوتستراب 5)