في هذا الدرس 3تصفّح المواضيع
- تستخدم الشارات badges لاضافة معلومات اضافية عن اي محتوى.
- لعمل badge شارة مستطيلة نقوم باضافة كلاس badge الى العنصر الذي يمثل الشارة.
- عادة ما تستخدم كلاسات background-color لاعطاء الشارة لون خلفية.
- ياخد عنصر badge كل ارتفاع العنصر الاب دائما.
BootStrap Badges
مثال على استخدام الشارات في bootstrap.
HTML
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>يمكن التعديل في شكل badges الشارات قليلا عن طريق اضافة كلاس badge-pill الذي يضيف حواف مستديرة الى عنصر badge.
Pill Badges
عمل دوران في زوايا الشارات باستخدام كلاس badge-pill
HTML
<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>من الاستخدامات الشهيرة والمنتشرة بشكل كبير للشارات هي اظهار عدد الاشعارات داخل زر. لذلك تستخدم كثير داخل الازرار.
Badge inside and element
استخدام كلاس badge داخل زر.
HTML
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-danger">4</span>
</button>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.