Bootstrap

Bootstrap Buttons
الازرار في BootStrap

ستتعلم في هذا الدرس تصميم buttons ازرار بسهوله جداً وتخصيص borders اطارات لها والتحكم في حالتها وحجمها عن طريق كلاسات button الموجودة في اطار عمل bootstrap.

التاريخ

01 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1245

المواضيع

6
الشروحات chevron_left Bootstrap Buttons chevron_left 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 يجب عليك اولا ان تضيف كلاس btn.

</> 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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