Bootstrap 5 الشهادة

الشريط المعدني

الشريط المعدني (Badges) يستخدم لإضافة معلومات إضافية إلى المحتوى:

في <span> في العنصر .badge والفئات السياقية (مثل .bg-secondary) لإنشاء شريط معدني مستطيل. يرجى ملاحظة أن الشريط المعدني يتم تقييده لتطابق حجم العنصر الأب (إذا كان موجودًا):

مثال

<h1>عنوان مثال <span class="badge bg-secondary">جديد</span></h1>
<h2>عنوان مثال <span class="badge bg-secondary">جديد</span></h2>
<h3>عنوان مثال <span class="badge bg-secondary">جديد</span></h3>
<h4>عنوان مثال <span class="badge bg-secondary">جديد</span></h4>
<h5>عنوان مثال <span class="badge bg-secondary">جديد</span></h5>
<h6>عنوان مثال <span class="badge bg-secondary">جديد</span></h6>

تجربة بنفسك

شريط السياق المعدني

استخدم أي فئة سياق (.bg-*) لتغيير لون الشريط المعدني：

مثال

<span class="badge bg-primary">رئيسي</span>
<span class="badge bg-secondary">ثانوي</span>
<span class="badge bg-success">نجاح</span>
<span class="badge bg-danger">خطر</span>
<span class="badge bg-warning">تحذير</span>
<span class="badge bg-info">معلومات</span>
<span class="badge bg-light">فاتح</span>
<span class="badge bg-dark">داكن</span>

تجربة بنفسك

الشهادة الكابسولة

استخدام .rounded-pill الصفة تجعل الشهادة أكثر دائرة:

مثال

<span class="badge rounded-pill bg-primary">رئيسي</span>
<span class="badge rounded-pill bg-secondary">ثانوي</span>
<span class="badge rounded-pill bg-success">نجاح</span>
<span class="badge rounded-pill bg-danger">خطر</span>
<span class="badge rounded-pill bg-warning">تحذير</span>
<span class="badge rounded-pill bg-info">معلومات</span>
<span class="badge rounded-pill bg-light">فاتح</span>
<span class="badge rounded-pill bg-dark">داكن</span>

تجربة بنفسك

الشهادة داخل العنصر

مثال على استخدام الشهادة داخل الزر:

مثال

<button type="button" class="btn btn-primary">
  رسالة <span class="badge bg-danger">4</span>
</button>

تجربة بنفسك