انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: الشارات في بوتستراب 5

Rounded Pill Badges الشارات الكبسولية المستديرة

أتقن تصميم الشارات في بوتستراب 5.3 بدايةً من التحجيم النسبي داخل العناوين والتلوين المتباين عبر text-bg والشارات الكبسولية وصولاً إلى عدادات الأزرار وإشعارات الزوايا.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

لتحويل زوايا الشارة المستطيلة الخفيفة إلى شكل كبسولي كامل الاستدارة يشبه وسوم التصنيفات العصرية، أضف أداة الحدود .rounded-pill إلى جانب .badge؛ فتأخذ الحافتان الجانبيتان نصف قطر دائري كبير يمنح الأرقام القصيرة ووسوم الحالة مظهراً انسيابياً أنيقاً.

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك

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