Bootstrap

Bootstrap Button Groups
مجموعات الازرار في BootStrap

ستتعلم في هذا الدرس كيفة دمج الازار معاً بشكل افقي لتظهر في سطر واحد باستخدام bootstrap.

التاريخ

03 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

879

المواضيع

6
الشروحات chevron_left Bootstrap Button Groups chevron_left Bootstrap

Bootstrap Button Groups
مجموعات الازرار في BootStrap

</> Bootstrap Button Groups
مجموعات الازرار في bootstrap

  • يتيح bootstrap امكانية تجميع كل الازرار الموجودة داخل نفس parent element العنصر الاب لتظهر في سطر واحد.
  • الكلاس المستخدم لدمج الازرار معا هو btn-group ويتم اضافته الى parent element الذي يحتوي كل الازرار.
  • يمكن استخدام هذا الكلاس مع عنصر button و عنصر a الرابط وعنصر input في HTML.
BootStrap Button Groups

دمج مجموعة ازرار باستخدام كلاس btn-group.

<div class="btn-group">
  <button class="btn btn-primary">Apple</button>
  <button class="btn btn-primary">Samsung</button>
  <button class="btn btn-primary">Sony</button>
  <a class="btn btn-primary">Amazon</a>
</div>
هام
اي button group هو فالاصل عنصر inline وبالتالي اذا كان هناك عدة button groups تظهر هذه المجموعات بجوار بعضها كما هو موضح في المثال السابق.

</> BootStrap Button Groups Size
حجم مجموعات الازرار في bootstrap

يتيح bootstrap امكانية تعديل حجم مجموعة الازرار الموجود نفس button group في وقت واحد باستخدام كلاسات btn -group-lg و btn-group-sm.

btn-group-lg: يضاف هذا الكلاس الى parent element لتكبير حجم مجموعة الازرار التي بداخله.

btn-group-sm:يضاف هذا الكلاس الى parent element لتصغير حجم مجموعة الازرار التي بداخله.

Button Groups Size

تكبير وتصغير حجم مجموعة الازرار.

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
هام
عند استخدام كلاس btn-group-lg او btn-group-sm يجب اولا وضع كلاس btn-group فبدونه لن يتم دمج الازرار في مجموعة واحدة.

</> BootStrap Vertical Button Groups
مجموعة الازرار الراسية في bootstrap

يستخدم كلاس btn-group-vertical لتغيير طريقة عرض مجموعة الازرار من افقي لرأسي ويضاف الى parent element.

Vertical Button Group

عمل مجموعة ازرار راسية.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.