على الموقع الرسمي لـ Bootstrap ، يتم توفير مكون شريط التنقل:
فقط ضع JQ و Bootstrap في مجلد الموقع وأدخل الكود التالي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> navbar </title> <meta name = content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> </head> <body> <viv> <nav roly = "sevigation"> <viv> <div> <button type = "button" data-toggle = "collapse" target = "#bs-example-navbar-collapse-1" <span> </span> <span> </span> </button> <a href = "#"> العلامة التجارية </a> </div> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#" data-toggle = "sropdown"> المنسدلة <span> </span> </a> <ul> <A href = "#" data-toggle = "sropdown"> tropown <span> </af> </a> <ul rom = "menu"> <li> <li> <a href = "#" href = "#"> شيء آخر هنا </a> </li> <li> </li> <li> <li> <a href = "#"> الرابط المنفصل </a> </li> <li> </li> <li> <a href = "#" </ul> </form rob or = "search"> <viv> <input type = "text" placeholder = "search"> </viv> <button type = "submit"> إرسال </form> <ul> <li> <a href = "#" rob = "menu"> <li> <a href = "#"> الإجراء </a> </li> <li> <a href = "#"> إجراء آخر </a> </li> <li> <a href = "#"> </ul> </viv> </viv> </v> ASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
يمكنك الحصول على شريط تنقل يمكن أن يختلف مع حجم النافذة:
يمكنك أيضًا تغيير قيمة الفصل في <nav rol = "sevigation"> إلى <nav rol = "sevigation"> ، وسيتم تعليق شريط التنقل في الجزء العلوي من صفحة الويب. بغض النظر عن كيفية سحب النافذة ، إذا قمت بتغيير قيمة الفصل إلى <nav rol = "sevigation"> ، يمكنك الحصول على شريط تنقل أسود.
تبدو مفيدة للغاية ، لكن عيوبها قاتلة للغاية. بغض النظر عن الألوان التي يوفرها شريط الملاحة هذا اللون الأبيض والأسود فقط. الشيء الأكثر رعبا هو أن شريط التنقل يتم عرضه مباشرة على الهاتف في IE8 ، ولكن أقل من دقة الشاشة 1440 × 900. يجب أن تعلم أن IE8 ليس IE6 ، ولكن المتصفح الافتراضي لنظام Win7.
يؤدي هذا إلى تحديد المستخدم في شريط التنقل للنقر فوق الزر الموجود على اليمين ، ثم تصبح القائمة المنسدلة:
دع محتوى صفحة الويب يتم سحبه مباشرة إلى قطعة كاملة. تجدر الإشارة إلى أن IE8 هو المتصفح الافتراضي لـ Win7 الآن. بغض النظر عن موقف IE6 المطلق في الصين ، حتى في سياق المزيد والمزيد من المستخدمين الذين يختارون Win7 ، لا يزال توافق IE8 مسألة تستحق النظر.
لذلك ، إذا كان بإمكانك اختيار شريط التنقل هذا فقط كملاحة لموقع الويب ، فهناك نوعان من bootstrap ، والتي يمكن استخدامها كبديل ، مع أنماط مختلفة ، واحدة هي صفحة علامة التبويب ، والآخر هو مجموعة الأزرار. لا يمثل شريط التنقل في Breadcrumb حلاً جيدًا ، لأنه يجب تقديم القائمة المنسدلة في bootstrap كزر. إذا تم كتابته في نص ، فهو أيضًا غير مفيد في IE8. بالطبع ، يمكنك اختيار وضع Bootstrap جانباً ، ويتم كتابة CSS لـ Masters بخط اليد من تلقاء نفسها والنظر إلى الإطار.
1. صفحة العلامة
النمط الأساسي للعلامة هو كما يلي ، وهناك قائمة منسدلة تتطلب الدعم من bootstrap.js ، botstrap.css ، و JQ.
لا تتغير صفحات العلامات مع حجم المتصفح
يمكنك التبديل داخل صفحة ويب واحدة أو القفز إلى صفحات أخرى. ستقفز الروابط في صفحة علامة التبويب التي توصي بها بشدة بالتنقل إلى صفحات الويب الأخرى بنفس التصميم مثل هذه الصفحة. أي أن صفحة علامة التبويب هذه موجودة أيضًا ولها نفس الموقع.
الرمز كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <till> togglableTabs </title> content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> </head> <body> <viv> <ul roly = "tableist"> <!-يمكن أن يكون لعلامة واحدة فقط حالة نشطة في علامة-> <li rob = "عرض واحد"> <! rob = "tab" data-toggle = "tab"> home </a> </li> <li rob = "عرض تقديمي"> <a href = "profile#" HREF = "#رسائل" rob = "tab" data-toggle = "tab"> الرسائل </a> </li> <li rob = "عرض تقديمي"> <a href = "#settings" rob = "tab" data-toggle = "tab"> setting </a> </li> <! <!-هذا هو المثلث الصغير للقائمة المنسدلة-> القائمة المنسدلة <span> </span> </a> <ul rob = "menu"> <li rob = "العرض التقديمي"> <a href = "#home" rom = "tab" data-toggle = "tab"> home </a> </li> <li rob = "presentation"> data-toggle = "tab"> ملف تعريف </a> </li> <li rob = "عرض تقديمي"> <a href = "#messages" rob = "tab" data-toggle = "tab"> الرسائل </a> </li> <li rob = "العرض التقديمي"> إلى صفحات أخرى بنفس الأسلوب ، مما يجعل المشاهدين يشعرون أنه لا يوجد قفزة. وبهذه الطريقة ، افصل الكود بحيث لا يتم تركيز رمز صفحة الويب في صفحة واحدة-> <li rob = "العرض التقديمي"> <a href = "back.html" rob = "tab"> الصفحات الأخرى </a> </li> </li></ul> <!-إذا كانت صفحة علامة التبويب تقفز إلى هذه الصفحة ، فاكتب المحتوى هنا. -> <viv> <div roly = "tabpanel" id = "home"> home </div> <div rob> "tabpanel" id = "profile"> profile </viv> <div rob = "tabpanel" id = "messages"> الرسائل </div>
2. حدد مجموعة الأزرار
لقد تم تغيير هذه الفقرة مرارًا وتكرارًا ، ويرجع ذلك أساسًا إلى أن فهمي لهذا المكون ليس دقيقًا بما يكفي.
النمط الأساسي لمجموعة زر التحديد التي تغطي الصفحة كما يلي:
سوف يتغير مع حجم المتصفح. بالطبع ، عندما يتم ضغطها إلى أقصى الحدود ، لن يتم إغلاقها مثل شريط Navbar Navigation Bar الذي يأتي مع bootstrap ، ويستلقي بهدوء في زر.
لا شك أن مجموعة زر التحديد هذه متوافقة مع IE8 ، ولكن مجموعة الأزرار التي لا يوجد بها قائمة منسدلة هي في الواقع ارتباط تشعبي ، باستخدام علامة <a> بدلاً من علامة <TUNTY> ، ولكن بالمقارنة مع العلامة العامة <a> ، راجع الرمز للزر في فئة هذه العلامة <a> ، راجع الكود للحصول على التفاصيل. رمز مجموعة الأزرار هذه خاصة حقًا.
الرمز المحدد كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> </head> <body> <!-طلب مجموعة زر لملء الصفحة بأكملها-> <viv> <viv> <!-كتابة أزرار لا تحتوي على قائمة منسدلة للكتابة بهذه الطريقة ، من النادر تحديد الروابط للأزرار ، يرجى ملاحظة-<a href = "#" <//button> </viv> <viv> <button type = "button"> right </button> </div> <!-اكتب هذا الزر باستخدام قائمة منسدلة-> <div> <button type = "button" data-toggle = "sropdow HREF = "#"> Link Dropdown </a> </li></ul> </viv> </viv> </body> </html>
3. أضف جدولًا على اللوحة ومدمجًا بنص الارتباط التشعبي العادي
غالبًا ما تكون الأشياء الأكثر شيوعًا وأبسط الأشياء الأكثر عملية ، ولكن يتم استخدام الجداول هنا للتخطيط بدلاً من تقسيم الصفحة إلى نظام شبكة من 12 قطعة. لأن 12 نسخة واجهت بعض الأعمدة مثل 5 نسخ لم يكن من السهل توزيعها بالتساوي.
تستخدم هذه اللوحة عناصر اللوحة التي توفرها Bootstrap ، والتي يمكن أيضًا تعديلها تلقائيًا وفقًا لحجم النافذة.
الكود أبسط بكثير من الحلتين أعلاه ، لكنه ليس مبهرًا في نفس الوقت. لكنها حقا بسيطة وعملية.
<!-يمكن تجاهل هذه العقدة. يتم وضعه في حاوية حاوية فقط لقطات الشاشة ولن تملأ النافذة بأكملها-> <viv> <!-لوحة الجسم فقط ، تغيير النمط فقط يغير لون الحدود-> <div> <div style = "text-align: center"> <tabling> <tr> <!-إذا كان ستة عناصر ، يمكنك استخدام نظام Restrap Bootstrap ، كل عمود يحتوي على حطبات 2. إذا كانت سبعة عناصر ، فسيتم حساب الخلية 100/7 = 14 ٪ من الحجم. -> <td> <a href = "#"> project 1 </a> </td> <td> <a href = "#"> project 2 </a> </td> <td> <a href = "#"> project 3 </a> 5 ..
الحلول الثلاثة المذكورة أعلاه هي حلول لحل عيوب شريط التنقل في NAVBAR في IE8. أنا شخصياً أعتقد أن النوع الأول نادر بعض الشيء وبديل ، والنوع الثاني هو الأكثر موصى به للمؤلف ، ويحتاج إلى استخدام النوع الثالث في النموذج. إذا كنت تستطيع تجنب ذلك ، فحاول تجنب ذلك. يمكنك وضع مجموعة زر التحديد في لوحة لاستبدال النوع الثالث من محتوى النص والجدول.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.