شريط الهاتف المنزلق Offcanvas | شريط التنقل Navbar في بوتستراب 5

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

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

بدلاً من دفع محتوى الصفحة للأسفل عند فتح قائمة الهاتف التقليدية، تفضل تطبيقات الويب العصرية إظهار درج جانبي منزلق مع طبقة تعتيم خلفية؛ ويدعم بوتستراب 5 دمج مكوّن .offcanvas مباشرةً داخل شريط التنقل.

وجّه زر الهاتف عبر data-bs-toggle="offcanvas" نحو data-bs-target="#navDrawer"، وضع الروابط داخل حاوية <div class="offcanvas offcanvas-end" tabindex="-1" id="navDrawer"> مزودة برأس وزر إغلاق وجسم. ومع وجود .navbar-expand-lg يعمل الدرج كقائمة منزلقة على الجوال ثم يندمج كصف أفقي طبيعي على الحاسوب تلقائياً.

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

HTML

<nav class="navbar bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">CloudConsole</a>
    <button class="navbar-toggler" type="button"
      data-bs-toggle="offcanvas" data-bs-target="#navDrawer"
      aria-controls="navDrawer" aria-label="Open menu">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

جرّب بنفسك

Offcanvas Mobile Navbar شريط الهاتف المنزلق Offcanvas

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

جميع فقرات هذا الدرس (شريط التنقل Navbar في بوتستراب 5)