Bootstrap Badges
الشارات في BootStrap
ستتعلم في هذا الدرس كل شئ عن عناصر badges الشارات وطريقة استخدامها والتحكم في الوانها واحجامها عن طريق اطار عمل bootstrap.
التاريخ
03 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1318
المواضيع
6
Bootstrap Badges
الشارات في BootStrap
</>
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>