Bootstrap Buttons
الازرار في BootStrap
ستتعلم في هذا الدرس تصميم buttons ازرار بسهوله جداً وتخصيص borders اطارات لها والتحكم في حالتها وحجمها عن طريق كلاسات button الموجودة في اطار عمل bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
BootStrap Buttons
الازرار في bootstrap
</>
Bootstrap Buttons
الازرار في bootstrap
تستخدم الازرار في كل صفحات الويب لعمل 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 Elements VS Buttons
العناصر والازرار في bootstrap
يمكن استخدام 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">
هام
لماذا نضع # بداخل link href attribute ؟
اذا كنا لا نملك رابط صفحة في href attribute فيجب عليا وضع # حتي لاي يظهر اي خطأ من السيرفر مثل 404 error.
</>
BootStrap Button Outline
الاطار الخارجي للازرار في bootstrap
- يمكن ايضا اضافة 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 Button Sizes
احجام الزر في bootstrap
بجانب الحجم الافتراضي للازرار يوفر لك 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>
</>
BootStrap Block Buttons
الازرار ذات العرض الكامل في bootstrap
- كلاس btn-block هو احد كلاسات bootstrap buttons والذي يسمح للزر بان ياخذ كل عرض parent element العنصر الاب الذي هو بداخله.
- في حالة وجود عدة ازار فيمكن تخصيص المسافة الراسية بينهم باضافة كلاس *-gap الى parent element.
- يمكن اضافة كلاس d-grid الى parent element للتاكد بان هذا الاب يتم عرضه في نظام grid شبكة.
Block Button
اعطاء الازرار عرض parent element بالكامل باستخدام كلاس btn-block.
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</>
BootStrap Active-Disabled Buttons
الازرار الفعالة والمعطلة في bootstrap
باستخدام 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
