الرئيسية
الصفحة الرئيسية
في هذه الصفحة
داخل العناوين داخل الأزرار شارة التنبيهات (Notification) الألوان المتوفرة الشارات الدائرية
صفحات أخرى
الأزرار التنبيهات التحميل المودال الكاروسيل

الشارات (Badges)

الشارات (Badges) تُستخدم للعدّاد والتنبيهات وإضافة تصنيفات صغيرة للنصوص (Labels). وهي تأخذ حجمها ولونها بناءً على العنصر الأب الذي يحتويها.

التوثيق الرسمي

1. الاستخدام داخل العناوين

الشارة يتغير حجمها تلقائياً ليناسب حجم الخط (font-size) للعنصر الأب.

المعاينة

عنوان كبير H1 جديد

عنوان H2 جديد

عنوان H3 جديد

عنوان H4 جديد

عنوان H5 جديد
عنوان صغير H6 جديد
شرح الكود:
  • badge: الكلاس الأساسي للشارة، يقوم بعمل الحواف الدائرية ويضبط المسافات (Padding).
  • bg-secondary: يحدد لون خلفية الشارة. في البوتستراب 5، استخدمنا bg-* بدلاً من badge-* الموجود في الإصدارات القديمة.
  • لاحظ كيف أن حجم المربع يتغير تلقائياً ليناسب مقاس الخط من H1 إلى H6.

2. داخل الأزرار (كعداد)

تُستخدم بكثرة كعداد رسائل أو إشعارات داخل الأزرار.

المعاينة
شرح الكود:
  • text-bg-secondary: هذا الكلاس ذكي جداً في بوتستراب 5. إنه يضع لون الخلفية الرمادي (Secondary) ويقوم تلقائياً باختيار لون النص الأنسب (إما أبيض أو أسود) حتى يكون قابلاً للقراءة بوضوح.
  • نضع الـ Span بداخل الـ Button ببساطة ليظهر العداد بجانب النص.

3. شارة التنبيهات المنبثقة (Notification Badge)

لوضع الشارة على زاوية العنصر (مثل إشعارات التطبيقات) نستخدم كلاسات التموضع (Position utilities).

المعاينة
شرح الكود:
  • position-relative: نضيفها للزر الأب حتى تكون الشارة محصورة بداخله.
  • position-absolute: لجعل الشارة تسبح فوق الزر بحرية.
  • top-0 start-100: لرفع الشارة إلى الأعلى (Top=0) وإلى النهاية (Start=100%). *ملاحظة:* Start تعني يسار في الإنجليزي ويمين في العربي (يدعم الاتجاهين!).
  • translate-middle: لضبط مركز الدائرة بالضبط على الزاوية.
  • p-2 ... rounded-circle: للمثال الثاني (نقطة التنبيه) لا نستخدم كلاس badge، بل نكتفي برسم دائرة حمراء صغيرة عبر إضافة حواف و تدوير كامل (circle) و تبطين (p-2).

4. ألوان الخلفيات والنصوص

استخدم text-bg-{color} لضبط الخلفية ولون النص المتوافق معها تلقائياً.

المعاينة
Primary Secondary Success Danger Warning Info Light Dark
شرح الكود:
  • text-bg-primary, text-bg-warning، إلخ: هي الإضافة الأفضل في البوتستراب 5، لأنها تريحك من تحديد أن لون خط التنبيه الأصفر يجب أن يكون أسود لكي يُقرأ، بينما التنبيه الأحمر يحتاج خط أبيض. هذا الكلاس يفعل الأمرين معاً!

5. الشارات الدائرية (Pill Badges)

استخدم rounded-pill لجعل الشارة بحدود دائرية كاملة (تشبه حبة الدواء).

المعاينة
Primary Secondary Success Danger Warning Info Light Dark
شرح الكود:
  • rounded-pill: كلاس عام في البوتستراب يقوم بتدوير زوايا العنصر بالكامل ليصبح شبه دائري (بيضاوي). يطبق على أي عنصر وليس فقط الشارات.