انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 22
دورة بوتستراب 5

الأزرار وزر الإغلاق في بوتستراب 5Bootstrap 5 Buttons and Close Button

أتقن تصميم الأزرار وزر الإغلاق في بوتستراب 5.3 من الألوان الدلالية والأزرار المفرغة والأحجام إلى أزرار العرض الكامل عبر d-grid وحالات التعطيل ومكوّن btn-close.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Base Button Class Variants كلاس الزر الأساسي وألوانه

تُمثل الأزرار نقطة التفاعل الأهم في أي تطبيق ويب؛ فمن خلالها يُرسل المستخدم نموذجاً، أو يحفظ إعداداته، أو يحذف سجلاً حساساً. يعتمد Bootstrap 5.3 بنية ثنائية الطبقات لتنسيق الأزرار: الطبقة الأولى هي الكلاس الأساسي .btn الذي يضبط الحشو الداخلي واستدارة الزوايا والمحاذاة وحلقة التركيز، والطبقة الثانية هي كلاس الهوية اللونية مثل .btn-primary للإجراء الأساسي، و.btn-secondary، و.btn-success، و.btn-danger للحذف، وحتى .btn-link الذي يمنح الزر مظهر الرابط النصي مع احتفاظه بسلوك الزر وحشوه.

مخطط هندسة الأزرار وأزرار العرض الكامل وزر الإغلاق في بوتستراب 5.3
HTML 
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Send</button>
<button type="button" class="btn btn-warning">Hold</button>
<button type="button" class="btn btn-danger">Drop</button>
<button type="button" class="btn btn-link">Cancel</button>
جرّب بنفسك

Outline Button Styles الأزرار المفرغة الثانوية

عندما تضع ثلاثة أزرار ممتلئة بالألوان الصريحة بجانب بعضها، تتشتت عين المستخدم عن الإجراء الأهم في الشاشة. تعالج سلسلة الأزرار المفرغة .btn-outline-primary حتى .btn-outline-dark هذا التزاحم البصري بإزالة لون الخلفية وإبقاء إطار ملون ونص مطابق يمتلئ باللون الكامل فور تمرير المؤشر أو التركيز عليه، مما يجعلها الخيار الأمثل لأزرار «إلغاء» أو «معاينة» المجاورة لزر الحفظ الرئيسي.

HTML 
<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary">
    Publish Course
  </button>
  <button type="button" class="btn btn-outline-dark">
    Save Draft
  </button>
</div>
جرّب بنفسك

Large and Small Buttons أحجام الأزرار الكبيرة والصغيرة

تتطلب لافتات الترحيب الرئيسية أزراراً بارزة كبيرة يسهل لمسها على الهواتف عبر الكلاس .btn-lg، بينما تحتاج خلايا الجداول المزدحمة وأشرطة الفلاتر الدقيقة إلى أزرار مضغوطة أنيقة عبر الكلاس .btn-sm، في حين يمثل غياب الكلاسين الحجم القياسي المتوازن.

Block Buttons with d-grid أزرار العرض الكامل بـ d-grid

في الإصدار الرابع اعتاد المطورون كتابة الكلاس .btn-block لصنع زر يمتد بعرض 100% من حاويته، لكنه كان يسبب التصاق الأزرار المتتالية ويفتقر للمرونة عبر الشاشات. ألغى Bootstrap 5 الكلاس .btn-block نهائياً واستبدله بحاوية التخطيط الذكية .d-grid .gap-2!

بفضل هذا البديل الحديث يمكنك تكديس الأزرار بعرض كامل على شاشة الهاتف لسهولة النقر بالإبهام، ثم تحويلها تلقائياً إلى أزرار متجاورة محاذية لنهاية السطر على الحاسوب بسطر واحد هو .d-grid .gap-2 .d-md-flex .justify-content-md-end.

HTML 
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-outline-secondary" type="button">
    Back to Step 1
  </button>
  <button class="btn btn-primary" type="button">
    Confirm Deployment
  </button>
</div>
جرّب بنفسك

Active and Disabled Buttons حالات تفعيل وتعطيل الأزرار

لتعطيل عنصر <button> حقيقي نضيف السمة المنطقية الأصيلة disabled فيخفض بوتستراب شفافيته إلى 65% ويمنع النقر والتركيز تلقائياً. أما عناصر الرابط <a> فلا تدعم سمة disabled في مواصفة HTML! لذلك لتعطيل رابط مصمم كزر يجب إضافة الكلاس .disabled مع السمتين الإلزاميتين aria-disabled="true" وtabindex="-1" وإزالة الوجهة الفعالة.

كما يمكنك تحويل الزر إلى زر تبديل ثنائي الحالة يحتفظ بوضع الضغط عبر data-bs-toggle="button" مع تحديث aria-pressed="true" تلقائياً.

Close Button Component مكوّن زر الإغلاق btn-close

استبدل Bootstrap 5 زر الإغلاق النصي القديم الذي كان يعتمد على رمز الضرب &times; وكلاس .close بالمكوّن المستقل الأنيق .btn-close! يرسم هذا المكوّن أيقونة إغلاق متجهية حادة مدمجة كخلفية دون أي حرف نصي بالداخل، ولذلك يُشترط دائماً تزويده بسمة aria-label="Close" لقارئات الشاشة، كما يتكيف تلقائياً مع الأسطح الداكنة في الإصدار 5.3.

المكوّن أو الحالةالصياغة القياسية في Bootstrap 5.3ملاحظة الإتاحة والتوافق
الزر الرئيسي الممتلئ<button type="button" class="btn btn-primary">حدد type="button" لمنع الإرسال التلقائي للنموذج
الزر الثانوي المفرغ.btn .btn-outline-secondaryيقلل التزاحم البصري بجانب الإجراء الأساسي
زر العرض الكامل المتجاوب.d-grid .gap-2 على الأبالبديل الرسمي المعتمد لكلاس .btn-block الملغى
تعطيل رابط منسق كزر.btn .disabled + tabindex="-1"إرفاق aria-disabled="true" إلزامي لقارئات الشاشة
زر الإغلاق القياسي<button type="button" class="btn-close">بدون نص داخلي ويشترط aria-label="Close"
HTML 
<div class="hstack gap-3 p-3 border rounded">
  <button type="button" class="btn btn-primary" disabled>
    Processing...
  </button>
  <button type="button" class="btn-close ms-auto"
    aria-label="Close"></button>
</div>
جرّب بنفسك
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

استوعبت في هذا الدرس معمارية الأزرار في بوتستراب 5.3، شاملة الألوان الدلالية، والأزرار المفرغة، والأحجام، وبناء أزرار العرض الكامل المتجاوبة بحاوية d-grid، وضوابط إتاحة الأزرار المعطلة، ومكوّن زر الإغلاق القياسي btn-close. الخطوة التالية: انتقل الآن إلى الدرس الثالث والعشرين لتعلّم تجميع الأزرار المترابطة أفقياً ورأسياً وبناء أشرطة الأدوات المتكاملة عبر btn-group وbtn-toolbar.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Outline Button الزر المفرغ الحواف
نمط زر ثانوي بخلفية شفافة وإطار ملون يمتلئ باللون عند تمرير المؤشر لتقليل الازدحام البصري.
للمراجعة
02 Block Button Grid حاوية أزرار العرض الكامل
استخدام حاوية d-grid وفواصل gap لتمديد الأزرار بكامل عرض الأب بدلاً من كلاس btn-block الملغى.
للمراجعة
03 Close Button مكوّن زر الإغلاق
مكوّن الإغلاق القياسي المعتمد على أيقونة متجهية مدمجة لإغلاق التنبيهات والنوافذ بنظافة.
للمراجعة
04 Toggle Button State زر التبديل ثنائي الحالة
زر يحتفظ بحالة التفعيل أو الإلغاء عند كل نقرة مع تحديث سمة aria-pressed تلقائياً.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CTA CTA
Call to Action
الزر الرئيسي الأبرز في الصفحة الذي يوجه المستخدم لتنفيذ الهدف الأساسي كالتسجيل أو الشراء.
للمراجعة
02 ARIA ARIA
Accessible Rich Internet Applications
توفر سمات التسمية وحالة التعطيل وحالة الضغط للأزرار كي تفهمها قارئات الشاشة.
للمراجعة
03 SVG SVG
Scalable Vector Graphics
تُدمج كأيقونة خلفية عالية الدقة داخل مكوّن زر الإغلاق دون الحاجة لنص داخلي.
للمراجعة
04 CSS CSS
Cascading Style Sheets
تتيح تخصيص ألوان وحشو وحدود الأزرار عبر متغيرات --bs-btn-* المحلية.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. ضع زر حفظ رئيسياً بجانب زر إلغاء مفرغ داخل حاوية d-grid gap-2 تتحول على شاشات md إلى صف مرن محاذٍ للنهاية.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. أنشئ شريطاً مرناً يضم عنواناً في البداية وزر إغلاق بكلاس btn-close وسمة aria-label="Close" في النهاية.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما الطريقة الرسمية المعتمدة في Bootstrap 5 لبناء أزرار تمتد بعرض كامل 100% بدلاً من الكلاس الملغى .btn-block؟

ألغى بوتستراب 5 الكلاس .btn-block واستبدله بتغليف الأزرار داخل حاوية .d-grid مع .gap-2.

02

أي مكوّن في Bootstrap 5 حلّ محل زر الإغلاق القديم (.close مع رمز &times;)؟

الكلاس .btn-close هو مكوّن زر الإغلاق القياسي المعتمد على أيقونة SVG مدمجة وبدون نص داخلي.

03

عند استخدام المكوّن .btn-close يجب ترك محتواه الداخلي فارغاً وتزويده بسمة aria-label="Close" لقارئات الشاشة.

لأن .btn-close يرسم علامة الإغلاق كخلفية SVG، فلا تضع بداخله &times; بل أضف aria-label="Close".

04

ما المتطلبات الصحيحة لتعطيل رابط <a> مصمم بكلاس .btn تعطيلًا كاملاً يشمل لوحة المفاتيح وقارئات الشاشة؟

لا يدعم وسم <a> سمة disabled، لذا يلزم الجمع بين .disabled وtabindex="-1" وaria-disabled="true".

05

أي فئة من الأزرار تزيل تعبئة الخلفية في الوضع العادي وتكتفي بإطار ملون للإجراءات الثانوية؟

توفر كلاسات .btn-outline-primary وأخواتها أزراراً مفرغة تمتلىء باللون عند التمرير والتركيز.

06

يُفضل دائماً كتابة type="button" صراحةً على أزرار التحكم غير المخصصة لإرسال النماذج لمنع الإرسال التلقائي غير المقصود.

النوع الافتراضي لوسم <button> داخل النماذج هو submit، لذا يحميك type="button" من إرسال النموذج بالخطأ.

07

أي كلاسين يتحكمان في تكبير أو تصغير حجم الزر عن الحجم القياسي في Bootstrap 5؟

يدعم الزر الحجمين القياسيين الإضافيين .btn-lg للكبير و.btn-sm للصغير.

08

أي سمة بيانات تحوّل الزر في Bootstrap 5 إلى زر تبديل يحتفظ بحالة الضغط ويحدّث aria-pressed تلقائياً؟

تعتمد كافة مكونات بوتستراب 5 التفاعلية على البادئة data-bs-* مثل data-bs-toggle="button".