أتقن بناء اللوحات الجانبية المنزلقة Offcanvas في بوتستراب 5 لسلات التسوق والفلاتر، وتعلّم مواضعها المنطقية الأربعة وخيارات التمرير والخلفية الثابتة واللوحات المتجاوبة عبر الشاشات وواجهة جافاسكريبت.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
يطبق محرك Offcanvas مصيدة تركيز ذكية Focus Trap فور فتح اللوحة عندما تكون الخلفية مفعّلة؛ فينتقل مؤشر لوحة المفاتيح مباشرةً إلى داخل الدرج، ويدور مفتاح Tab بين أزرار وحقول اللوحة فقط دون التسرّب إلى الروابط المخفية خلف التعتيم.
احرص دائماً على وضع tabindex="-1" على حاوية .offcanvas، وربطها بعنوانها عبر aria-labelledby، وإضافة aria-label="Close" على زر .btn-close، وسيغلق مفتاح Escape اللوحة ويعيد التركيز للزر الأصلي بسلاسة.
الصف 2
ملاحظة هامة
الصف 3
ملاحظة هامة
جميع فقرات هذا الدرس (اللوحات الجانبية المنزلقة في بوتستراب 5)
