شرح صفوف ومحتوى الفقرة
يُعدّ مكوّن Offcanvas أحد أبرز المكوّنات الجديدة كلياً التي قدّمها Bootstrap 5؛ فهو يوفّر لوحة جانبية مخفية خارج حدود الشاشة تنزلق بنعومة فوق الصفحة عند تفعيلها، مما يجعله الأداة القياسية لبناء قوائم الهواتف الجانبية، وسلات المشتريات الفورية، وأدراج تصفية المنتجات دون مغادرة الصفحة الحالية.
يتكوّن الهيكل القياسي من حاوية تحمل الكلاس .offcanvas مع كلاس موضع مثل .offcanvas-start، وبداخلها رأس .offcanvas-header يضم العنوان .offcanvas-title وزر الإغلاق .btn-close المزوّد بسمة data-bs-dismiss="offcanvas"، ثم منطقة المحتوى القابلة للتمرير .offcanvas-body.
HTML
<button class="btn btn-primary" type="button"
data-bs-toggle="offcanvas" data-bs-target="#cartBox">
Open Cart</button>
<div class="offcanvas offcanvas-start" tabindex="-1"
id="cartBox" aria-labelledby="cartLbl">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="cartLbl">Cart</h5>
<button type="button" class="btn-close"
data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">2 items ready.</div>
</div>