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