شرح صفوف ومحتوى الفقرة
يتيح بوتستراب ثلاث أدوات تموضع لإبقاء شريط التنقل في متناول اليد أثناء التمرير الطويل، مع فرق جوهري في السلوك التخطيطي:
- الإلصاق الذكي
.sticky-top— يعمل بخاصيةposition: stickyفيحتفظ بحيزه الطبيعي في تدفق الصفحة ولا يحجب السطر الأول من المحتوى مطلقاً. - التثبيت المطلق
.fixed-topو.fixed-bottom— ينزع الشريط من التدفق الطبيعي للصفحة، لذا يلزم تعويض ارتفاعه بإضافة حشو مقابل علىbodyمثلpadding-top: 4.5remحتى لا يختفي المحتوى خلفه.
| الكلاس أو السمة | الوظيفة في الشريط | ملاحظة هندسية مهمة |
|---|---|---|
.navbar-expand-{sm|md|lg|xl|xxl} | تحديد نقطة فرد القائمة أفقياً | حذفه يُبقي زر القائمة مطوياً على كل الشاشات |
.navbar-brand | تنسيق اسم الموقع أو الشعار | حدد width وheight لصورة الشعار دائماً |
.navbar-toggler | زر فتح القائمة على الهواتف | يتطلب سمة صوتية aria-label واضحة |
.collapse.navbar-collapse | حاوية الطي العمودي التقليدية | ترتبط بالزر عبر تطابق معرّف id |
.offcanvas.offcanvas-end | درج تنقل جانبي منزلق للهاتف | يتحول لصف أفقي تلقائياً فوق نقطة التوسع |
data-bs-theme="dark" | تفعيل تباين النص الداكن في BS 5.3 | البديل الرسمي للكلاس المتقاعد .navbar-dark |
.sticky-top مقابل .fixed-top | تثبيت الشريط أعلى النافذة | يستلزم .fixed-top حشواً تعويضياً للجسم |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء أشرطة التنقل المتجاوبة في بوتستراب 5.3، وتنسيق الشعار وحقول البحث والهوامش المنطقية، وتطبيق الوضع الداكن بسمة data-bs-theme="dark"، ودمج القوائم المطوية ودرج Offcanvas وأوضاع التثبيت. الخطوة التالية: انتقل الآن إلى درس «تتبع التمرير Scrollspy في بوتستراب 5» لربط أشرطة التنقل والفهارس بأقسام الصفحة تلقائياً أثناء التمرير.