انتقل إلى محتوى الدرس

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

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

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

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

الصف 2 ملاحظة هامة