شريط الملاحة (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. شريط التنقل العملي ثلاثي الاستجابة
العروض كما يلي:
في بعض الأحيان هناك حاجة إلى عكس اللون. يوفر 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>
العروض كما يلي:
5. خمسة علامات عملية
في بعض صفحات الويب ، غالبًا ما تتم إضافة علامة لإخبار المستخدمين ببعض المعلومات الإضافية ، مثل:
يتم استخراج هذا التأثير في bootstrap في مكون تسمية ويسلط الضوء على نمط ".label". على غرار زر العنصر الزر ، يوفر نمط التسمية أيضًا مجموعة متنوعة من الألوان ، وذلك أساسًا من خلال أسماء الفصول هذه لتعديل لون الخلفية ولون النص:
العروض كما يلي:
6. القتال العملي ستة - شارة
تُستخدم الشارات في الغالب لتذكيرك بعدد الرسائل غير المقروءة. في bootstrap ، يتم استخدام نمط "الشارة" لتحقيق تأثير الشارة.
<!-Navbar-Default Navigation Bar Medal-> <div rob = "navigation"> <viv> <a href = "##"> العنوان </a> </viv> <ul> <li> <a href = "##"> home </a> </li> <s href = "##" HREF = "##"> منتدى <span> 10 </span> </a> </li> <li> <a href = "##"
العروض كما يلي:
7 .
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> مربع منبثقة نقل متحركة </title> <link rel = "stylesheet" href = "http://netdna.bootsstrapcdn.com/bootstrap/3.1.1/csss النمط-> <style> body {margin: 30px ؛ padding: 30px ؛} </style> </head> <body> <button type = "button"> انقر فوق لي </button> <div id = "mymodal"> <viv> <viv> <div> <div> <button type = "button" data- dismiss = "modal" <h4> عنوان popt-up </h4> </viv> <viv> <p> محتوى الجسم الموضح </p> </div> <div> <button type = "button" data-dismiss = "modal"> close </button> </viv> </viv> <!-/. في نهاية المستند لجعل تحميل الصفحة بشكل أسرع-> <!-إذا كنت ترغب في استخدام المكون الإضافي JS الخاص بـ Bootstrap ، فيجب عليك أولاً الاتصال بـ jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js -> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ (". }) ؛ </script> </body> </html>العروض كما يلي:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي