في هذا الدرس 5تصفّح المواضيع
تُستخدم الشارات في واجهات الويب لإبراز حالة سريعة مثل «جديد»، أو رقم إصدار مثل v5.3، أو عداد رسائل غير مقروءة. صمّم Bootstrap 5.3 الكلاس .badge بقياس خط نسبي يبلغ 0.75em بدلاً من قيمة بكسل ثابتة؛ وبذلك تكبر الشارة تلقائياً عند وضعها داخل عنوان <h1> وتصغر بانسيابية داخل عنوان <h6> دون كتابة كلاس حجم إضافي.
<h2>
Gateway <span class="badge text-bg-primary">v5.3</span>
</h2>
<h5>
Cache <span class="badge text-bg-secondary">Beta</span>
</h5>تخلّى Bootstrap 5 عن كلاسات الألوان الخاصة بالشارات في الإصدارات القديمة لصالح منظومة الأدوات الموحدة! وفي الإصدار 5.3 أصبح الأسلوب القياسي الأذكى لتلوين الشارات هو دمج .badge مع كلاسات .text-bg-primary حتى .text-bg-dark؛ لأنها تضبط لون الخلفية وتختار تلقائياً نصاً أبيض على الألوان الداكنة ونصاً داكناً عالي الوضوح على الخلفيات الفاتحة مثل الأصفر والسماوي.
<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>لتحويل زوايا الشارة المستطيلة الخفيفة إلى شكل كبسولي كامل الاستدارة يشبه وسوم التصنيفات العصرية، أضف أداة الحدود .rounded-pill إلى جانب .badge؛ فتأخذ الحافتان الجانبيتان نصف قطر دائري كبير يمنح الأرقام القصيرة ووسوم الحالة مظهراً انسيابياً أنيقاً.
<span class="badge rounded-pill text-bg-primary">UI</span>
<span class="badge rounded-pill text-bg-success">OK</span>
<span class="badge rounded-pill text-bg-dark">RTL</span>لوضع شارة تنبيه عائمة على زاوية الزر العلوية — كما في أيقونات الجرس وسلة المشتريات — نمنح الزر الأب .position-relative، ثم نمنح الشارة .position-absolute .top-0 .start-100 .translate-middle! وبفضل الخاصية المنطقية .start-100 تنتقل الشارة تلقائياً من الزاوية اليمنى في الإنجليزية إلى الزاوية اليسرى في الواجهة العربية RTL، كما يمكنك صنع «نقطة حالة حمراء» بدون أرقام عبر حشو دائري مثل .p-2 .bg-danger .border .border-light .rounded-circle.
| نمط الشارة | تركيبة الكلاسات في Bootstrap 5.3 | قاعدة الإتاحة والتصميم |
|---|---|---|
| شارة عنوان نسبية | .badge .text-bg-secondary | ترث 0.75em من حجم العنوان الأب تلقائياً |
| شارة كبسولية دلالية | .badge .rounded-pill .text-bg-warning | تضمن .text-bg-* تباين لون النص مع الخلفية |
| عداد مدمج داخل زر | .btn وبداخله .badge .text-bg-secondary | أضف نص سياق داخل .visually-hidden |
| إشعار زاوي عائم | .position-absolute .top-0 .start-100 .translate-middle | يتطلب .position-relative على الزر الأب |
<button class="btn btn-primary position-relative"
type="button">
Alerts
<span class="position-absolute top-0 start-100
translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread alerts</span>
</span>
</button>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس بناء الشارات النسبية بكلاس badge، وتلوينها بتباين تلقائي عبر text-bg، وتدويرها بكلاس rounded-pill، ودمجها كعدادات أزرار أو إشعارات زاوية متوافقة مع قارئات الشاشة. الخطوة التالية: انتقل الآن إلى الدرس الخامس والعشرين لإتقان بناء صناديق التنبيه الدلالية Alerts ودمج الأيقونات المتجهية وإغلاقها بالحركة وتوليدها برمجياً.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Badge Component مكوّن الشارة
- وسم مصغر مضمن يرث 75% من حجم خط عنصره الأب لعرض الأرقام القصيرة وحالات العناصر.
- للمراجعة
- 02 Pill Badge الشارة الكبسولية
- شارة مقترنة بكلاس rounded-pill لمنح طرفيها استدارة كبسولية كاملة.
- للمراجعة
- 03 Color & Background Helper أداة الخلفية والنص المتباين
- كلاسات تضبط لون الخلفية وتختار لون النص الأبيض أو الداكن تلقائياً لتحقيق أعلى تباين قراءة.
- للمراجعة
- 04 Positioned Corner Badge شارة الزاوية المتموضعة
- تثبيت الشارة على زاوية الزر العلوية باستخدام التموضع المطلق والخصائص المنطقية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 EM EM
- Element-Relative Font Unit
- تمكّن الشارة من التكبير والتصغير تلقائياً تبعاً لحجم خط العنصر الأب.
- للمراجعة
- 02 WCAG WCAG
- Web Content Accessibility Guidelines
- معايير التباين البصري التي تلبيها كلاسات text-bg تلقائياً على الشارات الفاتحة والداكنة.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- ينقل شارة الزاوية المعتمدة على start-100 إلى الطرف الأيسر تلقائياً في العربية.
- للمراجعة
- 04 ARIA ARIA
- Accessible Rich Internet Applications
- تتكامل مع النصوص المخفية بصرياً لتوضيح دلالة أرقام العدادات لقارئات الشاشة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
صمّم ثلاث شارات كبسولية تجمع الكلاسين badge وrounded-pill مع كلاسات التلوين المتباين للنجاح والتحذير والخطر.
-
ثبّت شارة عداد كبسولية حمراء في زاوية زر يحمل position-relative مع إضافة وصف مخفي بصرياً لقارئات الشاشة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
لماذا يتغير حجم الشارة .badge تلقائياً عند وضعها داخل عناوين مختلفة من h1 إلى h6؟
يعتمد الكلاس .badge على وحدة 0.75em النسبية لخط العنصر الأب فيتناسب حجمه تلقائياً مع أي عنوان.
ما الصياغة الصحيحة في Bootstrap 5.3 لتلوين شارة تحذيرية بنص متباين مقروء تلقائياً؟
يضبط الكلاس text-bg-warning الخلفية الصفراء ويختار لون نص داكن متباين تلقائياً بدلاً من الأبيض الباهت.
أي كلاس أداة يُضاف إلى .badge لمنحها أطرافاً كبسولية مستديرة بالكامل في Bootstrap 5؟
حلت أداة الحدود القياسية .rounded-pill محل الكلاسات القديمة لمنح الشارات حواف كبسولية.
وضع رقم مجرد مثل 7 داخل شارة زر يكفي وحده لقارئات الشاشة دون الحاجة لأي نص توضيحي مخفي.
خطأ؛ يجب إرفاق عنصر .visually-hidden يوضح معنى الرقم مثل رسائل غير مقروءة.
ما الكلاس الواجب وضعه على الزر الأب حتى تتمركز شارة الإشعار المطلقة على زاويته بدلاً من زاوية الصفحة؟
يؤسس .position-relative مرجع الإحداثيات للعنصر الابن الحامل لكلاس .position-absolute.
استخدام الكلاس المنطقي .start-100 مع .translate-middle يجعل شارة الزاوية تنعكس تلقائياً للجهة الصحيحة في الواجهة العربية RTL.
نعم، يشير start-100 إلى نهاية اتجاه القراءة، فينتقل للزاوية اليسرى تلقائياً في RTL.
كيف نصنع نقطة إشعار دائرية صغيرة بدون أرقام في زاوية زر الملف الشخصي؟
يمنح الحشو المتساوي .p-2 مع .rounded-circle شكلاً دائرياً متناسقاً بينما يوفر .visually-hidden الوصف السمعي.
ماذا يحدث إذا استخدمت .bg-info وحده مع .badge بدلاً من .text-bg-info في Bootstrap 5.3؟
لأن .badge يحدد اللون الأبيض افتراضياً للنص، يلزم استخدام .text-bg-info لضبط لون نص داكن عالي التباين.