Bootstrap Badges
الشارات في BootStrap
ستتعلم في هذا الدرس كل شئ عن عناصر badges الشارات وطريقة استخدامها والتحكم في الوانها واحجامها عن طريق اطار عمل bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
