شريط التنقل (Navbar)
شريط التنقل في Bootstrap قوي جداً ومستجيب (Responsive). يحتوي على دعم كامل للشعارات، القوائم المنسدلة، حقول البحث، المحتوى الخارجي، والقوائم الجانبية المتقدمة.
التوثيق الرسمي1. شريط تنقل أساسي (Basic Navbar)
المثال الأكثر شيوعاً. شريط علوي مع شعار، روابط، قائمة منسدلة، وحقل بحث.
المعاينة
شرح الكود:
navbar: الكلاس الأساسي الحاوي لجميع عناصر الشريط.navbar-expand-lg: يخبر الشريط بأنه يجب أن يعرض جميع الروابط بدءاً من الشاشات الكبيرة (LG)، وأن يطويها لزر (همبرجر) في الشاشات الأصغر. يمكنك تغييره إلى-mdليطوى فقط في الشاشات الصغيرة جداً.bg-darkوdata-bs-theme="dark": لعمل شريط تنقل بلون داكن يتكيف نصه تلقائياً للون الأبيض.navbar-brand: مخصص لاسم الموقع.navbar-toggler: الزر الذي يظهر في الجوال لفتح القائمة.
2. الشعار مع صورة ونص (Brand)
خيارات متعددة لإضافة شعار الموقع في الشريط.
المعاينة
شرح الكود:
- نضع الـ
<img>بداخل الـ<a class="navbar-brand">. - استخدمنا
d-flex align-items-centerلجعل الصورة والنص مصطفين في المنتصف بدقة. وms-2(Margin Start) لترك مسافة صغيرة بين الصورة والنص.
3. النصوص ونماذج الإدخال (Text & Forms)
إضافة نصوص عادية (مثل تسجيل الدخول) أو حقول متقدمة لشريط التنقل.
المعاينة
شرح الكود:
navbar-text: هذا الكلاس مهم جداً. يقوم بتوسيط النصوص العادية عمودياً داخل شريط التنقل ويضبط لونها بحيث تتناسب مع الثيم الخاص بالشريط.- استخدمنا
input-groupمن مكونات الـ Forms لدمج علامة @ مع حقل الإدخال ليظهر بشكل أنيق داخل الشريط.
4. أنظمة الألوان (Color Schemes)
ضبط ألوان مخصصة مع التكيف التلقائي لألوان الروابط.
المعاينة
شرح الكود:
bg-blackوbg-primary: تضبط لون الخلفية الأساسي.data-bs-theme="dark": تخبر البوتستراب بأن الخلفية داكنة، فيقوم تلقائياً بتغيير لون النصوص والروابط بداخل الـ Navbar إلى الأبيض.- يمكنك أيضاً إلغاء كلاسات bg بالكامل وكتابة
style="background: linear-gradient(...)"لعمل شريط بألوان جذابة مع الحفاظ على التجاوب.
5. التموضع (Placement)
تثبيت شريط التنقل في أعلى الشاشة أو أسفلها.
المعاينة
شرح الكود:
fixed-top: يثبت الشريط دائماً في أعلى نافذة المتصفح. تأكد من إعطاء الـ Bodypadding-topبمقدار ارتفاع الشريط كي لا يغطي محتوى الموقع.fixed-bottom: يثبت الشريط دائماً في أسفل الشاشة.sticky-top: يظل الشريط في مكانه الطبيعي، ولكن عندما تنزل بالصفحة للأسفل (تتخطى الشريط)، سيلتصق هو بالأعلى بدلاً من أن يختفي.
6. الشريط القابل للتمرير (Scrolling Navbar)
إذا كانت الروابط كثيرة جداً، يمكنك تفعيل ميزة التمرير داخل القائمة المنسدلة في شاشات الجوال.
المعاينة (صغر الشاشة لترى التمرير)
شرح الكود:
navbar-nav-scroll: يضاف للـ<ul>لتمكين الـ Scroll بداخلها إذا زادت الروابط عن الحد المسموح.--bs-scroll-height: 100px;: هذا المتغير يحدد أقصى ارتفاع (Max-height) للقائمة المنسدلة في وضع الجوال. في المثال حددناه بـ 100 بكسل لإجبار ظهور شريط التمرير (Scrollbar) بسرعة للتوضيح.
7. محتوى خارجي مخفي (External Content)
استخدام زر الناف بار لفتح بلوك أو حاوية موجودة خارج الناف بار بالكامل!
المعاينة
شرح الكود:
- الفكرة هنا أننا قمنا بفصل الـ
collapseبالكامل ووضعه خارج الـnav(فوقه). - زر الـ
navbar-togglerيملكdata-bs-targetيشير إلى هذا الصندوق الخارجي. عند النقر، سينسدل الصندوق بالكامل دافعاً شريط التنقل للأسفل، وهو أسلوب تصميم مفضل في بعض المتاجر الإلكترونية للبحث المتقدم.
8. قائمة جانبية منزلقة (Offcanvas Navbar)
تحويل قائمة الموبايل إلى لوحة حديثة تخرج من الجانب.
المعاينة (قم بتصغير الشاشة لرؤية الزر)
شرح الكود:
- بدلاً من استخدام
collapse navbar-collapseللقسم المطوي، قمنا باستخدام كلاسات نافذةoffcanvasالجانبية. data-bs-toggle="offcanvas": غيرناها في زر الهمبرجر ليفتح هذه اللوحة المنزلقة.offcanvas-end: يعني أن القائمة الجانبية ستخرج من نهاية الشاشة (من اليسار في المواقع العربية rtl).- هذا المظهر مفضل جداً لتطبيقات الجوال الحديثة لأن القائمة تبدو كمكون مستقل وأنيق جداً.