انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: اللوحات الجانبية المنزلقة في بوتستراب 5

Body Scroll and Backdrop تمرير الصفحة وتثبيت الخلفية

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

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

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

افتراضياً، ما إن تفتح لوحة Offcanvas حتى يجمد بوتستراب تمرير الصفحة الخلفية ويضع طبقة معتمة Backdrop تغلق اللوحة عند النقر عليها. إذا أردت السماح للمستخدم بمواصلة قراءة وتمرير جدول المنتجات خلف لوحة المقارنة المفتوحة، أضف السمة data-bs-scroll="true".

وإذا كانت اللوحة تحتوي نموذج إدخال تخشى ضياع بياناته بنقرة خاطئة على الخلفية، اضبط data-bs-backdrop="static" لمنع الإغلاق الخارجي، أو data-bs-backdrop="false" لإلغاء التعتيم تماماً.

الصف 2 كود برمجي
HTML 
<div class="offcanvas offcanvas-start" id="statBox"
  data-bs-backdrop="static" data-bs-scroll="true"
  tabindex="-1" aria-labelledby="stLbl">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="stLbl">Draft</h5>
    <button type="button" class="btn-close"
      data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">Safe from misclicks!</div>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (اللوحات الجانبية المنزلقة في بوتستراب 5)