6.1 KiB
| title | localeTitle |
|---|---|
| Navigation Bar | شريط التنقل |
شريط التنقل
يوفر لك إطار Bootstrap أشرطة تنقل ميزة المكالمة. باختصار شريط تنقل (يُشار إليه أيضًا باسم navbars) هو رأس في أعلى الصفحة لعرض معلومات التنقل.
كيف تستعمل
لاستخدام أشرطة تنقل Bootstrap ، يمكنك إضافة عنصر <nav> إلى الجزء العلوي داخل عنصر <body> في صفحة الويب الخاصة بك. هناك أنماط متعددة يمكنك إضافتها لتخصيص عرض navbars الخاص بك.
مثال الكود
هذه هي الشفرة اللازمة لإنشاء شريط تنقل أساسي.
`
`أنماط Navbar
يوفر Bootstrap مجموعة من الفئات في إطار Bootstrap لتكوين navbars الخاص بك. هذه الفئات هي كما يلي:
navbar navbar-defaultهذا هو النمط الافتراضي لشارات Navbars الخاصة بك.navbar navbar-inverseيشبه هذا النمط الافتراضي باستثناء الألوان المقلوبة.
إضافة القوائم المنسدلة إلى شريط التنقل
يمكنك تضمين قائمة منسدلة داخل شريط التنقل. تتطلب هذه الميزة تضمين ملف javascript في Bootstrap حتى يعمل.
`
إضافة أزرار إلى شريط التنقل
يمكنك إضافة أزرار على شريط التنقل. تعمل فئات Bootstrap Button الموجودة ولكن ستحتاج إلى تضمين navbar-btn class إلى نهاية قائمة الفئة.
<button class="btn navbar-btn">Button</button>
إضافة نماذج إلى navbar
يمكنك أيضًا إضافة نماذج إلى شريط التنقل. قد يكون هذا الاستخدام للمهام مثل حقل البحث ، حقل تسجيل الدخول السريع ، إلخ.
`
محاذاة العناصر إلى اليمين على شريط التنقل
في بعض الحالات ، قد ترغب في محاذاة عناصر في شريط التنقل إلى اليمين (على سبيل المثال زر تسجيل الدخول أو التسجيل.). للقيام بذلك ، ستحتاج إلى استخدام فئة navbar-right .
`
`عرض شريط التنقل مستقل عن التمرير
في بعض الحالات ، قد ترغب في الاحتفاظ بشريط التنقل في الجزء العلوي أو السفلي من الشاشة بغض النظر عن التمرير. ستحتاج إلى إضافة فئة navbar-fixed-top أو navbar-fixed-bottom إلى عنصر <nav> .
`
`تصغير شريط التنقل
على شاشة صغيرة (مثل الهاتف أو الجهاز اللوحي) سيشغل شريط التنقل مساحة كبيرة جدًا. لحسن الحظ ، يوجد خيار تجميع شريط التنقل. يمكنك تحقيق ذلك باستخدام المثال التالي.
`
`أمثلة Navbar
navbar navbar-default
navbar navbar-inverse