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

Responsive Offcanvas Menus اللوحات المتجاوبة عبر الشاشات

أتقن بناء اللوحات الجانبية المنزلقة Offcanvas في بوتستراب 5 لسلات التسوق والفلاتر، وتعلّم مواضعها المنطقية الأربعة وخيارات التمرير والخلفية الثابتة واللوحات المتجاوبة عبر الشاشات وواجهة جافاسكريبت.
4 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

من أذكى مزايا الإصدار 5.2+ و5.3 عائلة الكلاسات المتجاوبة .offcanvas-sm وحتى .offcanvas-xxl (وأشهرها .offcanvas-lg)؛ فهي تحوّل الكتلة نفسها إلى درج منزلق مخفي على الشاشات الأصغر من lg، وتعرضها كقسم ثابت عادي داخل تخطيط الصفحة على شاشات الحاسوب دون الحاجة لتكرار عناصر HTML مرتين!

تذكر فقط إخفاء زر الفتح وزر الإغلاق على الشاشات الكبيرة بإضافة .d-lg-none وتمرير معرّف الهدف صراحةً على زر الإغلاق data-bs-target="#id".

الصف 2 صورة توضيحية
مخطط تحول اللوحة المتجاوبة offcanvas-lg من درج منزلق بالهاتف إلى عمود ثابت بالحاسوب
الصف 3 معاينة حية
الصف 4 ملاحظة هامة