مواضع الانزلاق الأربعة المنطقية | اللوحات الجانبية المنزلقة في بوتستراب 5

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

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

لا يفترض مكوّن .offcanvas موضعاً افتراضياً من تلقاء نفسه، بل يجب إرفاق أحد كلاسات الموضع الأربعة صراحةً: .offcanvas-start للانزلاق من بداية السطر (اليمين في العربية واليسار في الإنجليزية)، و.offcanvas-end للانزلاق من نهاية السطر، و.offcanvas-top من أعلى النافذة، و.offcanvas-bottom من أسفل الشاشة.

الصف 2 صورة توضيحية

مخطط المواضع المنطقية الأربعة لمكوّن offcanvas وتكيف start وend مع الواجهة العربية

الصف 3 كود برمجي

HTML

<button class="btn btn-outline-primary" type="button"
  data-bs-toggle="offcanvas" data-bs-target="#endBox">
  End Drawer</button>
<div class="offcanvas offcanvas-end" tabindex="-1"
  id="endBox" aria-labelledby="endLbl">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="endLbl">Filters</h5>
    <button type="button" class="btn-close"
      data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">End panel content.</div>
</div>

جرّب بنفسك

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

Four Offcanvas Placements مواضع الانزلاق الأربعة المنطقية

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

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