شريط الملاحة (NAVBAR) هو مكون مستقل في Bootstrap ، وهناك فرق واضح بين شريط الملاحة (NAVBAR) والملاحة (NAV) في Bootstrap. يوجد لون خلفية في شريط الملاحة (NAVBAR) ، ويمكن أن يكون شريط التنقل في أشكال مختلفة مثل الروابط والنماذج والنماذج والتنقل.
1.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> شريط التنقل </title> <link rel = "stylesheet" href = "http://netdna body {margin: 30px ؛ padding: 30px ؛} </style> </head> <body> <div rob = "sevigation"> <!-يتم تنفيذ العنوان من خلال "Navbar-Header" و "navbar-brand"-> <div> <a href = "##" <a href = "##" data-toggle = "sropdown"> blog <span> </span> </a> <!-القائمة الثانية-> <ul> <li> <a href = "##"> القائمة الثانية </a> </li> </li> </li> </li> <li> rol = "search"> <viv> <input type = "text" placeholder = "الرجاء إدخال الكلمات الرئيسية"/> </div> <button type = "submit"> البحث src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-بما في ذلك جميع الإضافات JS لل pootstrap أو JS التي يمكن استخدامها حسب الحاجة-> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>العروض كما يلي:
بالإضافة إلى استخدام عنصر A في العلامة التجارية Navbar و UL و Navbar-form من Navbar-Nav ، يمكن استخدام عناصر أخرى في شريط التنقل في bootstrap:
1) زر في شريط التنقل NAVBAR-BTN
2) نص في شريط الملاحة NAVBAR
3) الرابط العادي في شريط الملاحة Navbar-Link
2. شريط الملاحة القتال عملي 2
<!-Top Navigation Bar-> <div rom = "savigation"> <viv> <a href = "##"> العنوان </a> </viv> <ul> <li> <a href = "##"> home </a> </li> <li> <sire> <a href = "##" </ul> </viv> <!-شريط التنقل السفلي-> <div rom = "navigation"> <viv> <a href = "##"> العنوان </a> </viv> <ul> <li> <a href = "##"> home </a> </li> منتدى href = "##"> </a> </li> </ul> </viv> <!-محتوى نص-> <div> محتوى نص صفحة الويب </div>
العروض كما يلي:
3. شريط ملاحة عملي ثلاثي المستجيب
<div rol = "sevigation"> <viv> <!-. navbar-toggle يستخدم للمحتوى الذي يتقلص تبديل ، أي العنصر الذي يوجد فيه نمط انهيار NAV-Collapse-> <button type = "button" data-toggle = "span> </span> </span> </span> <span> </span> <!-تأكد من عرض العلامة التجارية Navbar في كل من الشاشات العريضة والضيقة-> <a href = "##"> العنوان </a> </div> <!-عندما يكون عرض الشاشة أقل من 768 بكسل ، سيتم عرض المحتويات في div.navbar-diversive. عند النقر فوق أيقونة شريط الرمز ، قم بتوسيعه مرة أخرى. عندما تكون الشاشة أكبر من 768 بكسل ، سيتم عرضها افتراضيًا. -> <viv> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"
العروض كما يلي:
في بعض الأحيان هناك حاجة إلى عكس اللون. يوفر Bootstrap شريط تنقل مقلوب لهذا ، ولكنه يحل محل اسم فئة Navbar-Deafult مع Navbar Verse ، ثم يتم تعديل لون خلفية شريط التنقل ولون النص.
4. التنقل العملي الأربعة
1) تلوين ترقيم الصفحات مع أرقام الصفحات
<!-ترقيم الصفحات: تراجع الحجم الطبيعي-lg: اجعل التنقل في ترقيم الصفحات أكبر ترقيم الصفحات: اجعل ترقيم الصفحات أصغر-> <ul> <li> <a href = "#"> «home </a> </li> <li> <a href ="#" <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <!-تعطيل الحالة-> <li>
العروض كما يلي:
2) بدوره بدوره وتوائم التراجع
<ul> <li> <a href = "#"> «الصفحة السابقة </a> </li> <!-حالة تعطيل-> <li> <a href ="#" الصفحة »</a> </li> </ul>
العروض كما يلي:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.