--- title: Navigation Bar localeTitle: شريط التنقل --- ## شريط التنقل يوفر لك إطار Bootstrap أشرطة تنقل ميزة المكالمة. باختصار شريط تنقل (يُشار إليه أيضًا باسم navbars) هو رأس في أعلى الصفحة لعرض معلومات التنقل. #### كيف تستعمل لاستخدام أشرطة تنقل Bootstrap ، يمكنك إضافة عنصر `

` إلى الجزء العلوي داخل عنصر `` في صفحة الويب الخاصة بك. هناك أنماط متعددة يمكنك إضافتها لتخصيص عرض navbars الخاص بك. #### مثال الكود هذه هي الشفرة اللازمة لإنشاء شريط تنقل أساسي. ` ` #### أنماط Navbar يوفر Bootstrap مجموعة من الفئات في إطار Bootstrap لتكوين navbars الخاص بك. هذه الفئات هي كما يلي: * `navbar navbar-default` هذا هو النمط الافتراضي لشارات Navbars الخاصة بك. * `navbar navbar-inverse` يشبه هذا النمط الافتراضي باستثناء الألوان المقلوبة. #### إضافة القوائم المنسدلة إلى شريط التنقل يمكنك تضمين قائمة منسدلة داخل شريط التنقل. تتطلب هذه الميزة تضمين ملف javascript في Bootstrap حتى يعمل. ` ` #### إضافة أزرار إلى شريط التنقل يمكنك إضافة أزرار على شريط التنقل. تعمل فئات Bootstrap Button الموجودة ولكن ستحتاج إلى تضمين `navbar-btn` class إلى نهاية قائمة الفئة. ` ` #### إضافة نماذج إلى navbar يمكنك أيضًا إضافة نماذج إلى شريط التنقل. قد يكون هذا الاستخدام للمهام مثل حقل البحث ، حقل تسجيل الدخول السريع ، إلخ. ` ` #### محاذاة العناصر إلى اليمين على شريط التنقل في بعض الحالات ، قد ترغب في محاذاة عناصر في شريط التنقل إلى اليمين (على سبيل المثال زر تسجيل الدخول أو التسجيل.). للقيام بذلك ، ستحتاج إلى استخدام فئة `navbar-right` . ` ` #### عرض شريط التنقل مستقل عن التمرير في بعض الحالات ، قد ترغب في الاحتفاظ بشريط التنقل في الجزء العلوي أو السفلي من الشاشة بغض النظر عن التمرير. ستحتاج إلى إضافة فئة `navbar-fixed-top` أو `navbar-fixed-bottom` إلى عنصر `

` . ` ` #### تصغير شريط التنقل على شاشة صغيرة (مثل الهاتف أو الجهاز اللوحي) سيشغل شريط التنقل مساحة كبيرة جدًا. لحسن الحظ ، يوجد خيار تجميع شريط التنقل. يمكنك تحقيق ذلك باستخدام المثال التالي. ` ` #### أمثلة Navbar `navbar navbar-default` [اسم الموقع](#navbar-default) * [الصفحة الرئيسية](#navbar-default) * [صفحة 1](#navbar-default) * [الصفحة 2](#navbar-default) * [الصفحة 3](#navbar-default) زر * [رابط الإجراء # 1](#navbar-default) * [رابط الإجراء # 2](#navbar-default) `navbar navbar-inverse` [اسم الموقع](#navbar-inverse) * [الصفحة الرئيسية](#navbar-inverse) * [صفحة 1](#navbar-inverse) * [الصفحة 2](#navbar-inverse) * [الصفحة 3](#navbar-inverse) زر * [رابط الإجراء # 1](#navbar-inverse) * [رابط الإجراء # 2](#navbar-inverse) #### معلومات اكثر: [وثائق navbar BootStrap](https://getbootstrap.com/docs/4.0/components/navbar/)