الأزرار (Buttons)
في Bootstrap، الأزرار تُبنى بكلاستين: btn (إجبارية دائماً) + btn-{color} لتحديد اللون.
يمكن تطبيقها على <button> أو <a> أو <input>.
1. الألوان الأساسية
Bootstrap يوفر 8 ألوان جاهزة. الكلاس: btn btn-{اسم اللون}.
| الكلاس | الاستخدام |
|---|---|
btn-primary | الإجراء الرئيسي (أزرق) |
btn-secondary | إجراء ثانوي (رمادي) |
btn-success | نجاح / تأكيد (أخضر) |
btn-danger | حذف / خطر (أحمر) |
btn-warning | تحذير (أصفر) |
btn-info | معلومة (سماوي) |
btn-light | فاتح |
btn-dark | داكن |
شرح الكود:
type="button": خاصية ضرورية لمنع الزر من إرسال نموذج (Form) عن طريق الخطأ إذا كان داخل نموذج.btn: الكلاس الأساسي، يعطي الزر التنسيق العام (التباعد، الخط، الزوايا). بدون هذا الكلاس لن تعمل كلاسات الألوان.btn-primaryوما شابهها: تحدد اللون وشكل التأثير عند التمرير أو الضغط.
btn وحده بدون لون لن يعطي أي تنسيق — يجب دائماً إضافة btn-{color} أو استخدام التخصيص اليدوي.
2. الأزرار الإطارية (Outline)
بدل الخلفية المصمتة، يمكن عرض الزر بإطار فقط عبر: btn-outline-{color}.
شرح الكود:
btn-outline-*: يزيل لون الخلفية ويضعه على الإطار (Border) والنص فقط. عند تمرير الماوس فوقه (Hover) يمتلئ الزر باللون. مفيد للأزرار الثانوية لتخفيف الازدحام البصري.
3. الأحجام
ثلاثة أحجام: btn-lg (كبير) — بدون كلاس (متوسط الافتراضي) — btn-sm (صغير).
شرح الكود:
btn-lg: يكبر حجم الخط والمسافات الداخلية للزر.btn-sm: يصغر حجم الخط والمسافات الداخلية.
4. الحالات (Active / Disabled)
active يجعل الزر يبدو مضغوطاً، وdisabled أو الخاصية disabled تعطّله.
شرح الكود:
class="... active": يضيف تأثيراً لونياً يعطي انطباعاً بأن الزر "مضغوط" أو "مفعل حالياً".disabled: هذه خاصية HTML (Attribute) تمنع الضغط على الزر، والبوتستراب يغير شكله ليصبح باهتاً ويزيل تأثير تمرير الماوس.
5. زر كامل العرض (Block Button)
استخدم d-grid على الـ wrapper لجعل الزر يملأ العرض الكامل. أو d-grid gap-2 لعدة أزرار.
شرح الكود:
- في الإصدارات القديمة من البوتستراب كنا نستخدم `btn-block`. في إصدار 5، نستخدم نظام الـ Grid.
d-grid: تُضاف للعنصر الأب (الحاوية)، وتجعل كل ما بداخلها يأخذ العرض الكامل المتاح له.gap-2: تترك مسافة بمقدار معين (حوالي 0.5rem) بين الأزرار.
d-md-block تجعله كامل العرض فقط على الشاشات الصغيرة ويرجع عادياً على المتوسطة.
6. مجموعة الأزرار (Button Group)
btn-group يجمع عدة أزرار في صف واحد ملتصق. btn-group-vertical يجعلها عمودية.
أفقي:
مع أحجام مختلفة:
شرح الكود:
btn-group: حاوية تلصق الأزرار ببعضها البعض، وتزيل الزوايا المنحنية من المنتصف لتبدو كقطعة واحدة.btn-group-lgأو-sm: تُعطى للحاوية بدلاً من كل زر لتكبير/تصغير المجموعة بأكملها مرة واحدة.role="group": مهمة للأشخاص الذين يستخدمون قارئات الشاشة (لتحسين الـ Accessibility).
7. زر الإغلاق (Close Button)
كلاس btn-close يعطي زر X أبيض على خلفية داكنة. استخدم btn-close-white على الخلفيات الداكنة.
عادي:
على خلفية داكنة:
معطّل:
شرح الكود:
btn-close: يضع أيقونة الـ X (SVG مدمجة) تلقائياً، بدون الحاجة لاستخدام FontAwesome أو صور.btn-close-white: تعكس ألوان الأيقونة لتصبح بيضاء حتى تظهر بوضوح فوق الخلفيات الغامقة.
8. تخصيص الزر بـ CSS Variables
يمكنك تعديل شكل أي زر باستخدام متغيرات CSS المدمجة في Bootstrap مباشرةً بدون كتابة CSS خارجي.
| المتغير | التأثير |
|---|---|
--bs-btn-bg | لون الخلفية |
--bs-btn-color | لون النص |
--bs-btn-border-color | لون الإطار |
--bs-btn-hover-bg | خلفية عند التمرير |
--bs-btn-padding-x | التبطين الأفقي |
--bs-btn-padding-y | التبطين العمودي |
--bs-btn-font-size | حجم الخط |
--bs-btn-border-radius | تدوير الزوايا |
شرح الكود:
- باستخدام
style="..."والمتغيرات التي تبدأ بـ--bs-يمكنك تجاوز الألوان الافتراضية لبوتستراب في نفس السطر. - هذه الطريقة ممتازة عند الحاجة إلى زر بلون محدد لا يوفره البوتستراب أصلاً (مثل لون شعار شركتك أو ألوان متدرجة Gradient) دون الحاجة لكتابة كلاس CSS كامل.