اكتب في المقدمة
في هذه المقالة ، سأتحدث عن استخدام bootstrap استنادًا إلى صفحة ويب للمناظر الطبيعية التي قمت بها. لقطات صفحة الويب هي كما يلي:
يمكن عرض تأثيرات ورمز صفحة الويب الكاملة هنا أو عرضها على CodePen. تشمل التأثيرات الرئيسية التي تحتاجها صفحات الويب لتحقيقها ما يلي:
1. يطفو أزرار تسجيل الدخول والتسجيل في شريط التنقل بعد النقر فوق مربعات مشروط تسجيل الدخول والتسجيل ، ويمكن تبديل نوافذ تسجيل الدخول والتسجيل. شريط القائمة يستجيب
2. يمكن سحب خيارات المناظر الطبيعية في شريط الملاحة. انقر فوق كهف Jiuzhaigou Lijiang Water Curtain في المنسدلة لتحديد علامة التبويب المقابلة.
3.
4. انقر للتبديل على صفحة علامة التبويب
الآن نبدأ في تبني bootstrap.
أعتقد أن الأصدقاء قد سمعوا عن bootstrap أو استخدموه. في صفحة الويب هذه ، أستخدم CDN Bootstrap v3.3.4. انقر هنا لتنزيل أحدث إصدار من Bootstrap v3.3.5 أو انقر هنا لتنزيله على الموقع الرسمي. أعتقد أن هناك دائمًا واحد يناسبك ~~~~~~
في هذه المقالة ، دعنا نتحدث عن شريط الملاحة أولاً.
شريط الملاحة
قبل استخدام BS ، يجب أولاً الرجوع إلى BS ، بما في ذلك CSS و JS. الطريقة المرجعية بسيطة للغاية ، مثل الرجوع إلى الملفات الخارجية العادية. يمكنك استخدام روابط CDN أو وضعها في المراجع المحلية. ويرد الرمز أدناه.
<html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-conflible" content = "ie = edge"> <meta name = "viewport" content = "width = width ، scale-scale = 1" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim و represse.js for ie8 for efed of html5 reements and media queries-> <!-warning. 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/1.js/1.4. <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
في مثال صفحة الويب المشهد هذا ، أستخدم رابط CDN.
في الوقت نفسه ، نظرًا لأن المكون الإضافي BS يعتمد على JQ ، يجب أيضًا تقديم JQ.
أعط أولاً الرمز الكامل لشريط التنقل
<nav> <viv> <!-تجميع العلامة التجارية والتبديل للحصول على عرض أفضل للهاتف المحمول-> <div> <button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1"> <span> تبادل التنقل </span> </span> </span> HREF = "#"> حدد علامة تجارية بنفسك </a> </div> <!-التنقل في الزاوية اليسرى العليا-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> الصفحة الرئيسية <span> (current) </span> </a> <li> <li> <li> rob = "button" aria-expanded = "false"> المشهد <span> </af> </a> <ul rom = "menu"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> href = "#shuilianong"> shuijian cave </a> </li> <li> </li> <li> <a href = "#shuilianandong"> shuijian cave </a> </li> </li> </li> <li> <a href = "#" data-arget = "#about"> <a href = "#"> حول </a> </li></ul> <form rob = "search"> <div> <input type = "text" placeholder = "search for placents .. id = "signin-button"> <a href = "#"> تسجيل الدخول </a> </li> <li data-toggle = "modal" data-target = "#signin-signup-tab" id = "signup-buTTER"> <a href = "#"
تعتمد مكونات التنقل من BS جميع على نفس فئة .NAV ويتم شرح الكود بشكل منفصل. دعونا نلقي نظرة على هذه الفقرة أولاً:
<button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1"> <span> تبديل الملاحة </span> <span> </span> <span> </span> </span> </button>
الغرض من هذا الرمز هو تقليل منفذ العرض ، وسوف تنهار خيارات القائمة في شريط التنقل ، والنقر على أيقونة الانهيار ، وسيتم ترتيب خيارات القائمة في شريط التنقل رأسياً. فئة .navbar العكسية في NAV هي لون عكسي. يمكن للأصدقاء إزالة فئة .Navbar العكسية لمراقبة التأثير. لأنني عنصر تحكم أسود ، أستخدم اللون المقلوب هنا. إذا كنت ترغب في استخدام ألوان أخرى ، الذهب الغني ، يمكن للأصدقاء مطابقتهم وفقًا لذوقهم. يمكن استخدام فئة العلامة التجارية .NavBar لتحديد العلامة التجارية لموقع الويب الخاص بك. سأستخدم النص لتحديد علامة تجارية بنفسي هنا. يمكن للأصدقاء المهتمين إضافة شعارهم الخاص. يمكن لفئة .dropdown-toggle تنفيذ عملية سحب ، ويمكن لفئة .
كما يوحي الاسم ، فإن فئة .Navbar-right في مربع البحث وتسجيل الدخول والتسجيل هو الصحيح.
سمات البيانات
هنا من الضروري التحدث عن سمة البيانات من BS. في BS ، يمكن للمطورين استخدام جميع ملحقات JS في BS فقط من خلال سمات البيانات. هذه واجهة برمجة تطبيقات من الدرجة الأولى في BS وغالبًا ما تكون طريقة مفضلة لاستخدام المكونات الإضافية JS. على سبيل المثال ، فإن البيانات toggle = "collapse" و data-toggle = "المنسدلة" في الكود أعلاه هي طرق استخدام المكونات الإضافية JS في BS.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم شريط التنقل في Bootstrap.