شرح صفوف ومحتوى الفقرة
استبدل Bootstrap 5 زر الإغلاق النصي القديم الذي كان يعتمد على رمز الضرب × وكلاس .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" |
<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.