في هذا الدرس 6تصفّح المواضيع
تستخدم الازرار في كل صفحات الويب لعمل actions اجراءات تفاعلية مع المستخدم, ويوفر bootstrap تنسيقات معدة مسبقة تساعد على ابراز دور كل زر.
الجدول التالي يوضح كلاسات الازرار المدعومة في bootstrap:
| الكلاس | لون خلفية الزر |
| btn | شفافة |
| btn-primary | ازرق |
| btn-secondary | رمادي |
| btn-success | اخضر |
| btn-info | لبني |
| btn-danger | احمر |
| btn-warning | برتقالي |
| btn-dark | اسود |
| btn-light | رمادي خفيف |
| btn-link | يحول الزر الى رابط |
BootStrap Button Classes
كلاسات الازرار في bootstrap
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-link">Link</button>يمكن استخدام bootstrap button classes كلاسات الازرار مع elements عناصر اخرى غير buttons مثل:
- a (link) elements
- input elements
Element and Buttons Classes
استخدام كلاسات btn مع عناصر HTML مختلفة.
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">- يمكن ايضا اضافة borders - outlines اطارات بـ 8 الوان مختلفة.
- يكتب هذا الكلاس بنفس طريقة كلاسات الزر العادية مع اضافة كلمة outline بعد btn مثل btn btn-outline-primary.
Button Outline
مثال على كلاس btn-outline
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>بجانب الحجم الافتراضي للازرار يوفر لك bootstrap حجمين اخرين يمكن استخدامهما مع اي زر وهما:
- btn-lg: لجعل الزر اكبر من الحجم الافتراضي.
- btn-sm: لجعل الزر اصغر من الحجم الافتراضي.
Button Sizes
استخدام كلاس btn-lg و btn-sm لتخصيص حجم الزر.
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>- كلاس btn-block هو احد كلاسات bootstrap buttons والذي يسمح للزر بان ياخذ كل عرض parent element العنصر الاب الذي هو بداخله.
- في حالة وجود عدة ازار فيمكن تخصيص المسافة الراسية بينهم باضافة كلاس *-gap الى parent element.
- يمكن اضافة كلاس d-grid الى parent element للتاكد بان هذا الاب يتم عرضه في نظام grid شبكة.
Block Button
اعطاء الازرار عرض parent element بالكامل باستخدام كلاس btn-block.
باستخدام bootstrap يمكن التحكم في حالة اي button لجعله اما active اي يمكن استخدام cursor actions اجراءات المؤشر معه واما ان يكون هذا الزر inactive او disabled معطل اي لا يمكن استخدام اي cursor action معه.
- active: في الوضع الافتراضي يكون الزر مفعلا لذلك ليس هناك حاجة لاضافة هذا الكلاس الا لاظهار الزر بشكل اوضح واكثر تميزا عن باقي الازرار.
- disabled: اما disabled فيمكن اضافته ضمن الكلاسات او اضافته في صورة attribute منفصل لالغاء تفعيل هذا الزر.
- <a>: عند الغاء تفعيل عنصر الرابط فيجب استعمال disabled في صورة كلاس فقط وليس attribute.
BootStrap Active-Disabled Buttons
تفعيل والغاء تفعيل الازرار في bootstrap.
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.