Bootstrap

Bootstrap Badges
الشارات في BootStrap

ستتعلم في هذا الدرس كل شئ عن عناصر badges الشارات وطريقة استخدامها والتحكم في الوانها واحجامها عن طريق اطار عمل bootstrap.

التاريخ

03 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1215

المواضيع

6
الشروحات chevron_left Bootstrap Badges chevron_left Bootstrap

Bootstrap Badges
الشارات في BootStrap

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> Bootstrap Badges
الشارات في bootstrap

  • تستخدم الشارات badges لاضافة معلومات اضافية عن اي محتوى.
  • لعمل badge شارة مستطيلة نقوم باضافة كلاس badge الى العنصر الذي يمثل الشارة.
  • عادة ما تستخدم كلاسات background-color لاعطاء الشارة لون خلفية.
  • ياخد عنصر badge كل ارتفاع العنصر الاب دائما.
BootStrap Badges

مثال على استخدام الشارات في bootstrap.

<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>

</> BootStrap Pill Badges
الشارات ذات الحواف المستديرة في bootstrap

يمكن التعديل في شكل badges الشارات قليلا عن طريق اضافة كلاس badge-pill الذي يضيف حواف مستديرة الى عنصر badge.

Pill Badges

عمل دوران في زوايا الشارات باستخدام كلاس badge-pill

<span class="badge badge-pill bg-primary">Primary</span>
<span class="badge badge-pill bg-secondary">Secondary</span>
<span class="badge badge-pill bg-success">Success</span>

</> BootStrap Badge Inside An Element
الشارة داخل عنصر في bootstrap

من الاستخدامات الشهيرة والمنتشرة بشكل كبير للشارات هي اظهار عدد الاشعارات داخل زر. لذلك تستخدم كثير داخل الازرار.

Badge inside and element

استخدام كلاس badge داخل زر.

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-danger">4</span>
</button>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات