يعد شريط التنقل ميزة جيدة وهو ميزة بارزة لموقع Bootstrap. شريط التنقل هو مكون META مستجيب يعمل كعنوان التنقل للتطبيق أو موقع الويب. ينهار شريط التنقل في عرض الجهاز المحمول ويتوسع شريط التنقل أفقياً مع زيادة عرض منفذ العرض المتاح. في جوهر شريط التنقل في Bootstrap ، يتضمن شريط التنقل تعريف الأنماط لأسماء المواقع والملاحة الأساسية.
خطوات إنشاء شريط التنقل الافتراضي هي كما يلي:
لإضافة روابط إلى شريط التنقل ، ما عليك سوى إضافة قائمة غير مرتبة مع الفئة .NAV و .navbar-nav.
ستشارككم الأمثلة التالية في شريط التنقل الذي تم إجراؤه باستخدام Bootstrap3. المحتوى المحدد كما يلي
على سبيل المثال
جوجل
ويبو
إذن كيف تكتب مثل هذا المكون المريح
استخدام bootstrap3!
أخبرنا مباشرة
بشكل عام ، يتم وضع التنقل في الهيكل التالي
<nav rob = "sevigation"> <viv> <viv> <a href = "#"> <img src = "..."> </a> </viv> </viv> </v>
1. علامات NAV
في الدرجة الأولى ، يكون Navbar ضروريًا. الخصائص الأخرى اختيارية.
تؤدي إضافة Navbar-Default إلى إنشاء التنقل الأساسي ، ولن يتم إصلاحه حيث يكون اللون شفافًا.
أضف لون الفئة المنقولة بالبحرية لتحويل الأسود
أضف إلى قمة قشرة NAVBAR للإصلاح في الأعلى ، وأضف قاعًا من NAVBARS لإصلاحه في الأسفل
تأثير إضافة قمة Navbar على النحو التالي
<viv>
رأس التنقل ، على سبيل المثال ، سجل الموقع ، انقر فوق الصفحة الرئيسية ، أو اسم الموقع
التأثير على النحو الوارد أعلاه
أعتقد أن التأثير سيكون أفضل إذا كان بإمكاني تغييره إلى رسالة نصية هنا
2. الشكل
إضافة نماذج في التنقل ، مثل البحث ، تسجيل الدخول ، إلخ. أمر شائع أيضًا
على سبيل المثال ، بحثي أعلاه
<form rob = "search"> <viv> <input type = "text" placeholder = "search"> </viv> <button type = "submit"> search </utton> </poth>
اشرح أن فئة Navbar-Left ستضع هذا النموذج على اليسار
بالطبع ، هناك أيضًا فصل يمين Navbar
وبالمثل ، يمكن إضافة الزر هكذا
<button type = "button"> قم بتسجيل الدخول </button>
يمكن إضافة النص مثل هذا
<p> تم توقيعه في Mark Otto </p>
يمكن إضافة الرابط مثل هذا
<p> تم توقيعه على أنه <a href = "#"> مارك أوتو </a> </p>
وبهذه الطريقة ، يمكنك إضافة دروس يمين Navbar أو Navbar-Left
التنقل الخاص بي
<!-navigation-> <viv> <div id = "navcontainer"> <nav rob = "navigation"> <viv> <viv> <a href = "#" <li> <a data-toggle = "modal" target = "#register"> التسجيل </a> </li> <li> <a data-toggle = "modal" data-arget = "#signin"> تسجيل الدخول </a> </li> </ul> </liv> </div> </nav> </div>
التأثير على النحو التالي
لمزيد من المحتوى ، يمكنك الرجوع إلى المقالة للتعلم:
Bootstrap تنفذ تأثير شريط التنقل الافتراضي
يجب أن يتعلم Bootstrap كل يوم (II)
يجب أن يتعلم Bootstrap كل يوم مكون إضافي للملاحة (Affix)
يمكن أيضًا العثور على المزيد من المحتوى حول bootstrap في مواضيع خاصة: "Bootstrap التعلم التعليمي"
ما ورد أعلاه هو شريط التنقل المصنوع باستخدام bootstrap3. آمل أن يكون ذلك مفيدًا لتعلم الجميع وجعل شريط التنقل الخاص بك