تحتوي هذه المقالة على طرق الاستخدام الأساسية لشريط التنقل في Bootstrap للرجوع إليها. المحتوى المحدد كما يلي
1. نمط الملاحة الأساسي bootstrap
تصنع قضبان التنقل بشكل رئيسي في إطار bootstrap من خلال نمط ".NAV". لا يوفر نمط الافتراضي ".NAV" نمط التنقل الافتراضي. يجب إرفاق نمط آخر به ليكون فعالًا ، مثل "Nav-Tabs" ، "Nav-Pills" ، وما إلى ذلك ، على سبيل المثال ، هناك مثال على شريط التنقل في Tab في محرر التعليمات البرمجية على اليمين. طريقة التنفيذ الخاصة به هي إضافة أنمتين من الفئة إلى UL TAG.NAV و NAV-TABS
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
2. شريط الملاحة الأساسي bootstrap
عند إنشاء شريط تنقل أساسي ، يتضمن بشكل أساسي الخطوات التالية:
الخطوة 1: أضف أولاً اسم الفصل "Navbar-Nav" استنادًا إلى قائمة التنقل (<ul class = "nav">)
الخطوة 2: إضافة حاوية (div) خارج القائمة واستخدم أسماء الفصول "NavBar" و "Navbar-Default"
تتمثل الوظيفة الرئيسية في نمط ".Navbar" في ضبط تأثيرات الحشو الأيسر واليمين والزوايا المستديرة ، ولكن لا يتم تعيين الأنماط المتعلقة باللون بأي شكل من الأشكال.
<div rom = "navigation"> <ul> <li> <a href = "##"> الصفحة الرئيسية </a> </li> <li> <a href = "##"> سلسلة من البرامج التعليمية </a> </li> <li> <li> <shref = "##" <li> <a href = "##" عنا </a> </li> </ul> </viv>
3. إضافة عنوان إلى شريط التنقل في Bootstrap
في إنتاج صفحات الويب ، غالبًا ما يكون هناك عنوان أمام القائمة (حجم النص أكبر قليلاً من النصوص الأخرى). في الواقع ، قام إطار Bootstrap أيضًا بإجراء هذا الاعتبار للجميع ، والذي يتم تنفيذه من خلال "Navbar-Header" و "Navbar-Brand".
<div rom = "navigation"> <viv> <a href = "##"> شريط الملاحة </a> </iv> <ul> <li> <a href = "##"> الصفحة الرئيسية </a> </li> <li> <li> <shref = "##" <li> <a href = "##"> الحالات الناجحة </a> </li> <li> <a href = "##" عنا </a> </li> </ul> </viv>
4. Bootstrap Mavigation Bar القائمة الثانوية
كما أنه من السهل جدًا إضافة قائمة ثانوية إلى شريط التنقل
<div rom = "navigation"> <viv> <a href = "##"> شريط التنقل </a> </viv> <ul> <li> <a href = "##"> الصفحة الرئيسية </a> </li> <li> <a href = "##" href = "##"> css3 </a> </li> <li> <a href = "##"> javaScript </a> </li> <li> <a href = "##" الحالات الناجحة = "##"
5. شريط التنقل في Bootstrap مع نموذج
تحتوي بعض أشرطة التنقل على نماذج بحث ، ويتم توفير "Navbar-Form" في إطار Bootstrap. الطريقة بسيطة جدا للاستخدام. ضع نموذجًا مع اسم فئة NavBar-Form في حاوية NavBar. يسمح Navbar-Left "بالتعويم على اليسار لتحقيق محاذاة بشكل أفضل. في إطار Bootstrap ، يتم أيضًا توفير نمط" يمين البحرية "للسماح بمحاذاة العناصر مع اليمين في شريط التنقل.
<div rom = "navigation"> <viv> <a href = "##"> bootstrap </a> </viv> <ul> <li> <a href = "##"> الصفحة الرئيسية </a> </li> <li> <li> <a href = "##" href = "##"> css3 </a> </li> <li> <a href = "##"> javaScript </a> </li> <li> <a href = "##" href = "##"> مقدمة للمعلمين المشهورين </a> </li> <li> <li> <a href = "##"> الحالات الناجحة </a> </li> <li> <a href = "##"> عننا </a> </li> </li> </ul> <form action = ## "rol =" search " <button type = "subvice"> Search </utton> </mapp> </viv>
6. الأزرار والنصوص والروابط في شريط التنقل في bootstrap
بالإضافة إلى استخدام عنصر A في العلامة التجارية Navbar و UL و Navbar-form من Navbar-Nav ، يمكن استخدام عناصر أخرى في شريط التنقل في إطار bootstrap. يوفر الإطار ثلاثة أنماط أخرى:
1). زر في شريط التنقل navbar-btn
2). نص في Navigation Bar Navbar
3). Navbar-Link في شريط الملاحة
ومع ذلك ، فإن هذه الأنماط الثلاثة تخضع لبعض القيود عند استخدامها في الإطار ويجب استخدامها في تركيبة مع العلامة التجارية NAVBAR و NAVBAR-NAV. علاوة على ذلك ، هناك بعض القيود على الكمية. بشكل عام ، لن تكون هناك مشكلة عند استخدام واحد أو اثنتين ، وستكون هناك مشاكل إذا تجاوزت اثنين.
<div rom = "navigation"> <viv> <a href = "##"> bootstrap </a> </viv> <ul> <li> <a href = "##"> نص navbar </a> </li> <li> <li> <shref = "##" <li> <a href = "##"> نص navbar </a> </li></ul> </viv> <div roly = "navigation"> <viv> <a href = "##"> bootstrap </a> </av> <viv> <div> <a href = "##" text </a> HREF = "##"> نص navbar </a> </viv> </viv>
7. شريط التنقل الثابت في Bootstrap
في إحدى الحالات العديدة ، يريد المصممون إصلاح شريط التنقل في أعلى أو أسفل المتصفح ، وتطبيق شريط التنقل الثابت هذا أكثر شيوعًا في تطوير الأجهزة المحمولة. يوفر إطار Bootstrap طريقتان لإصلاح أشرطة التنقل:
.Navbar-Gisted-Top: تم إصلاح شريط التنقل في الجزء العلوي من نافذة المتصفح
.-navbar-bottom: تم إصلاح شريط التنقل في أسفل نافذة المتصفح
<div rom = "sevigation"> ... </div> <viv> أنا راضٍ </div> <div rob = "sevigation"> ... </div>
8. التنقل في ترقيم ترقيم التراجع
قد يكون التنقل في ترقيم الصفحات المرقم هو التنقل الأكثر شيوعًا في ترقيم الصفحات ، خاصةً عندما يكون هناك الكثير من المحتوى في صفحة القائمة ، فسيوفر للمستخدمين أساليب التنقل في ترقيم الصفحات. عادةً ما يحب العديد من الطلاب استخدام هياكل Div> a و div> لإنشاء التنقل المفرط. ومع ذلك ، في إطار bootstrap ، يتم استخدام بنية مثل UL> li> a ، ويتم إضافة طريقة ترقيم الصفحات إلى علامة UL.
<ul> <li> <a href = "#"> «</a> </li> <li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> </a> <li> <li> <li> <li> <li> <li> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> »</a> </li> </ul>
في إطار bootstrap ، يمكنك أيضًا تعيين حجم زر الترقيم في عدة مواقف مختلفة.
1). جعل الملاحة ترقيم الصفحات أكبر من خلال "ترقيم الصفحات" ؛
2). اجعل التنقل في ترقيم الصفحات أصغر من خلال "ترقيم الصفحات"
<ul> ... </ul> <ul> ... </ul> <ul> ... </ul> <ul> ... </ul>
بالإضافة إلى توفير التنقل في الصفحة ، يوفر إطار Bootstrap أيضًا التنقل في دورة الصفحة. غالبًا ما يظهر هذا النوع من التنقل في ترقيم الصفحات على بعض مواقع الويب البسيطة ، مثل المدونات الشخصية ، ومواقع المجلات ، وما إلى ذلك. هذا النوع من التنقل في ترقيم الصفحات لا يرى رقم الصفحة المحدد ، ويوفر فقط زر "الصفحة السابقة" و "الصفحة التالية".
في الاستخدام الفعلي ، يشبه التنقل في ترقيم الصفحات للصفحات التنقل في صفوف الصفحات المرحم بالصفحة ، مما يضيف فئة النداء إلى علامة UL.
<ul> <li> <a href = "#"> «الصفحة السابقة </a> </li> <li> <a href ="#"> الصفحة التالية» </a> </li> </ul>
بشكل افتراضي ، يتم عرض التنقل في الترحيل الذي يتحول إلى الصفحة في الوسط ، ولكن في بعض الأحيان نحتاج إلى أن يكون على اليسار والآخر إلى اليمين. يوفر إطار bootstrap styles
السابق: دع الزر "السابق" يترك
التالي: دع زر "التالي" على اليمين
<ul> <li> <a href = "#"> «الصفحة السابقة </a> </li> <li> <a href ="#"> الصفحة التالية» </a> </li> </ul>
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن شريط التنقل في Bootstrap ، وآمل أن يكون مفيدًا لتعلم الجميع.