قضبان التنقل هي مكونات ميتا مستجيبة تعمل كرؤوس التنقل في تطبيقك أو موقع الويب الخاص بك.
1. شريط التنقل الافتراضي
يمكن طي شريط التنقل (ويمكن تشغيله وإيقافه) على الجهاز المحمول ويصبح وضعًا موسعًا أفقيًا مع زيادة عرض منفذ العرض المتاح
تخصيص العتبات للأوضاع القابلة للطي والأوضاع الأفقية
اعتمادًا على طول ما تضعه في شريط التنقل ، ربما تحتاج إلى ضبط العتبة لارتداء شريط التنقل للدخول إلى وضع الطي والوضع الأفقي. يمكنك تحقيق احتياجاتك عن طريق تغيير قيمة متغير @Grid-Float Breakpoint أو إضافة رمز CSS الخاص بك.
الخطوة الأولى:
علامة NAV الحاوية الخارجية وأضف فئة نمط NAV BAR للإشارة إلى أنها تنتمي إلى شريط التنقل
<nav rol = "savigation"> </v>
تأثير:
الخطوة 2 : إضافة رأس
<nav rol = "sevigation"> <viv> <button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1"> <span> Toggle Navigation </span> </span> </span> </span> </span> </span> </span> </span> </nav>
تتداخل تسمية الزر بثلاثة أيقونات سبعة. ثم أعط فئة نمط Navbar-Toggle وانهيار السمة (الانهيار) ، والهدف هو هدف البيانات عند النقر.
عندما تضيق النافذة إلى حد ما ، يظهر التأثير على اليمين.
الخطوة 3: القائمة المنسدلة المتداخلة ، نموذج النموذج ، القائمة المنسدلة.
شفرة:
<h1> شريط التنقل </h1> <nav rol = "sevigation"> <viv> <button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1"> <span> تبديل التنقل </span> href = "#"> العلامة التجارية </a> </viv> <div id = "bs-example-navbar-collapse-1"> <!-القائمة المنسدلة المتداخلة-> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" <li> <a href = "#" data-toggle = "sropdown"> المنسدلة <b> </b> </a> <ul> <li> <a href = "#"> الإجراء </a> </li> <li> <ahref = "#" HREF = "#"> الإجراء </a> </li> <li> <a href = "#"> الإجراء </a> </li> <li> <a href = "#"> الإجراء </a> </li> </li> </li> </li> </ul> <! type = "button"> إرسال </button> </form> <! -----> </viv> </v>
معاينة:
تعزيز إمكانية الوصول إلى قضبان التنقل
لتعزيز إمكانية الوصول ، تأكد من إضافة دور = "التنقل" إلى كل شريط تنقل.
2. الشكل
يعطي وضع النموذج داخل .Navbar-form محاذاة رأسية جيدة وحالة انهيار في منفذ عرض أضيق. استخدم خيار المحاذاة لتحديد مكان ظهوره في شريط التنقل.
تتم مشاركة الكثير من التعليمات البرمجية باستخدام Mixin و .navbar-form و .form-Inline.
شفرة
<form action = "" rob = "search"> <viv> <input type = "text"/> </viv> <button type = "button"> إرسال </button> </poth>
أضف تسمية التسمية إلى مربع الإدخال
إذا لم تقم بإضافة علامات تسمية إلى مربع الإدخال ، فسيواجه قارئ الشاشة مشاكل. بالنسبة للنماذج في شريط التنقل ، يمكنك إخفاء علامة التسمية من خلال فئة .SR فقط.
3. الأزرار
شفرة:
<button type = "button"> تسجيل الدخول </button>
معاينة:
4. النص
عند لف النص في .Navbar-Text ، عادة ما يتم استخدام علامة <p> لتباعد الخط الصحيح واللون.
قصاصة الكود:
<p> النص </p>
5. روابط غير الإنارة
ربما ترغب في إضافة روابط قياسية خارج مكونات التنقل القياسية ، ثم يمكن أن يعطي فئة .Navbar-Link الرابط اللون الافتراضي والعكس الصحيح.
قصاصة الكود:
انسخ الرمز كما يلي: <p> هذا هو <a href = "#"> link </a> </p>
6. محاذاة المكون
استخدم .navbar-left أو .Navbar-right Class لمحاذاة روابط التنقل أو النماذج أو الأزرار أو النص. يستخدم كلا الفئتين أنماط CSS العائمة في اتجاهات محددة. على سبيل المثال ، لمحاذاة روابط التنقل ، تحتاج إلى وضعها في فئة أدوات منفصلة <ul>.
هذه الفئات عبارة عن إصدارات مختلطة من .pull-left و .pull-right ، لكنها تقتصر على استعلامات الوسائط ، مما يجعل من السهل التعامل مع مكونات شريط التنقل على شاشات بأحجام مختلفة.
7. ثابت في الأعلى
تتيح إضافة top. navbar التي تسمح بتثبيت شريط التنقل في الأعلى. التأثير لا يكفي.
تحتاج إلى ضبط حشوة لعلامات الجسم
سيحجب شريط التنقل الثابت محتوى آخر على الصفحة ما لم تقم بتعيين الحشو فوق <Body>. استخدم القيمة الخاصة بك أو استخدم الرمز الوارد أدناه. نصيحة: الارتفاع الافتراضي لشريط التنقل هو 50 بكسل.
الجسم {padding-top: 70px ؛ }
يجب وضعه بعد الملف الأساسي لـ Bootstrap CSS. (قضايا التغطية)
8. ثابت في الأسفل
استخدم. navbar-bottom بدلاً من ذلك.
تحتاج إلى ضبط داخلي (حشوة) لعلامات الجسم
سيحجب شريط التنقل الثابت محتوى آخر على الصفحة ما لم تقم بتعيين الحشو في أسفل <Body>. استخدم القيمة الخاصة بك أو استخدم الرمز الوارد أدناه. نصيحة: الارتفاع الافتراضي لشريط التنقل هو 50 بكسل.
body {padding-bottom: 70px ؛ }
تأكد من استخدامه بعد تحميل جوهر Bootstrap CSS.
9. ابق في الأعلى
قم بإنشاء شريط تنقل مع الصفحة عن طريق إضافة. يختفي كما تم تمرير الصفحة لأسفل. على عكس فئة .Navbar-Fixed-* ، لا تحتاج إلى إضافة حشوة إلى الجسم.
10. شريط الملاحة العكسي
يمكن تغيير ظهور شريط التنقل عن طريق إضافة فئة. نافبار.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو مقدمة مفصلة عن كيفية استخدام شريط التنقل في bootstrap. آمل أن يكون ذلك مفيدًا لتعلم الجميع.