Bootstrap 4 شارات
عنوان المثال جديد
عنوان المثال جديد
عنوان المثال جديد
عنوان المثال جديد
عنوان المثال جديد
عنوان المثال جديد
تُستخدم الشارات لإضافة معلومات إضافية إلى أي محتوى. استخدم .badgeالفصل مع فئة سياقية (مثل .badge-secondary) داخل <span>
العناصر لإنشاء شارات مستطيلة. لاحظ أن مقياس الشارات يتناسب مع حجم العنصر الأصلي (إن وجد):
مثال
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
شارات سياقية
خبرات
ثانوي
نجاح
خطر
تحذير
معلومات
خفيفة
داكن
استخدم أيًا من الفئات السياقية ( .badge-*) لتغيير لون الشارة:
مثال
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
شارات حبوب منع الحمل
خبرات
ثانوي
نجاح
خطر
تحذير
معلومات
خفيفة
داكن
استخدم .badge-pillالفصل لجعل الشارات دائرية أكثر:
مثال
<span class="badge badge-pill badge-primary">Primary</span>
<span
class="badge badge-pill badge-secondary">Secondary</span>
<span
class="badge badge-pill badge-success">Success</span>
<span class="badge
badge-pill badge-danger">Danger</span>
<span class="badge badge-pill
badge-warning">Warning</span>
<span class="badge badge-pill
badge-info">Info</span>
<span class="badge badge-pill
badge-light">Light</span>
<span class="badge badge-pill
badge-dark">Dark</span>
شارة داخل عنصر
مثال على استخدام شارة داخل زر:
مثال
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>