Bootstrap Button Groups
مجموعات الازرار في BootStrap
ستتعلم في هذا الدرس كيفة دمج الازار معاً بشكل افقي لتظهر في سطر واحد باستخدام bootstrap.
التاريخ
03 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1156
المواضيع
6
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>