شرح صفوف ومحتوى الفقرة
لوضع شارة تنبيه عائمة على زاوية الزر العلوية — كما في أيقونات الجرس وسلة المشتريات — نمنح الزر الأب .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 ودمج الأيقونات المتجهية وإغلاقها بالحركة وتوليدها برمجياً.