القائمة المنسدلة
بيان خاص: نظرًا لأن تأثير التفاعل لمكون Bootstrap يعتمد على الإضافات المكتوبة بواسطة مكتبة jQuery ، يجب عليك أولاً تحميل jQuery.min.js قبل استخدام bootstrap.min.js لإنتاج تأثيرات.
<div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </button> <ul rom = "menu" aria-labelledby = "href =" presiddown <s dropdow دور = "عرض تقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"> عنصر القائمة المنسدلة </a> </li> <li rom = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" "href ="#" HREF = "#"> عناصر القائمة المنسدلة </a> </li> </ul> </viv> <!-يجب استيراد jQuery قبل bootstrap ، يتم تنفيذ الأخير على أساس الأول-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
صورة التكاثر:
مبدأ التنفيذ:
في البداية ، كان هناك عرض: لا شيء في الفصل ؛ ألق نظرة على CSS أدناه
.dropdown-menu {الموضع: absomute ؛/*تعيين تحديد المواقع المطلقة ، نسبة إلى العنصر الأصل div.dropdown*/top: 100 ٪ ؛/*دع عنصر القائمة المنسدلة في أسفل عنصر القائمة الأصل. إذا لم يتم تعيين العنصر الأصل على تحديد المواقع النسبية ، فسيكون العنصر بالنسبة لعنصر الجسم*/اليسار: 0 ؛ z-index: 1000 ؛/*تعيين عنصر القائمة المنسدلة لا يتم تغطية عناصر أخرى*/العرض: لا شيء ؛/*إخفاء عنصر القائمة المنسدلة عن طريق الافتراضي*/float: اليسار ؛ Min-WIDT: 160px ؛ الحشوة: 5px 0 ؛ لا شيء ؛ لون الخلفية: #fff ؛ خلفية clip: padding-box ؛ الحدود: 1px solid #ccc ؛ الحدود: 1px solid rgba (0 ، 0 ، 0 ، .15) ؛ الحدود الحدودية: 4px ؛ -webkit-box: 0 6px 12px rgba (0 ، 0 ، 0 ، .175) 0 ، .175) ؛}ثم استخدم حدث النقر للتحكم في إزالة وإضافة فئة العلامات لتحقيق العرض والاختباء
من خلال تقنية JS ، أضف أو إزالة اسم الفئة "فتح" إلى الحاوية الأصل "div.dropdown" للتحكم في العرض أو إخفاء القائمة المنسدلة. هذا افتراضي ،
"div.dropdown" ليس لديه اسم الفصل "Open". عندما ينقر المستخدم لأول مرة ، سيتم إضافة اسم الفصل "Open" إلى اسم الفصل "Open" ؛ عندما ينقر المستخدم مرة أخرى ، سيتم إزالة اسم الفئة "فتح" في حاوية "div.dropdown" مرة أخرى. يمكننا عرض العملية بأكملها من خلال حريق المتصفح:
تقصير:
ينقر المستخدم لأول مرة:
ينقر المستخدم مرة أخرى:
فتح CSS
.Open> .dropdown-menu {display: block ؛}انسحب خط تقسيم القائمة
دعنا نلقي نظرة على المثال أعلاه ، ثم لصق الرمز! انظر إلى التأثير ، لا تزال بحاجة إلى تقديم ملف JS! لا توجد أشياء كثيرة بعد ذلك!
<div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </button> <ul rom = "menu" aria-labelledby = "href =" presiddown <s dropdow rob = "العرض التقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> عنصر القائمة المنسدلة </a> </li> <li rob = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" "href ="#" rob = "menuitem" tabindex = "-1" href = "#"> عنصر القائمة المنسدلة </a> </li>
صورة التكاثر:
في الواقع ، هناك سطر واحد من التعليمات البرمجية
<li rob = "العرض التقديمي"> </li>
عنوان القائمة المنسدلة
قم بتحميل الكود مباشرة
<div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </button> <ul rom = "menu" aria-labelledby = "presctionMenu1> <li rob =" presentation "> part 1 mener </li> <li rob = HREF = "#"> عنصر القائمة المنسدلة </a> </li> <li rob = "العرض التقديمي"> <a roly = "menuitem" tabindex = "-1" href = "#" rob = "العرض التقديمي"> </li> <li rob = "عرض تقديمي"> الجزء 2 رأس القائمة </li> <li rob = "العرض التقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#" العنصر </a> </li> <li rob = "عرض تقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"
صورة التكاثر:
في الواقع ، يوجد رمز واحد فقط:
<li rob = "العرض التقديمي"> رأس القائمة الجزء 2 </li>
محاذاة القائمة المنسدلة
<h4> استخدم فئة السحب اليمين لمحاذاة القائمة المنسدلة مع الجانب الأيمن من الحاوية الأصل </h4> <div style = "float: left ؛
القائمة المنسدلة
<span> </span> </button> <ul rom = "menu" aria-labelledby = "sropdownmenu1"> <li rob = "presentation"> <a roly = "menuitem" tabindex = "-1" href = "#"#" العنصر </a> </li> <li rob = "عرض تقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> المنسدلة عن عنصر القائمة </a> </li> <li rom = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" href = "#" rob = "العرض التقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"> عناصر القائمة المنسدلة </a> </li> </ul> </viv> <br/> <br/> <h4> استخدم من القائمة المنسدلة من الفئة المنسدلة لزيادة القائمة المنسدلة مع القائمة المنسدلة مع حاوية الوالدين </h4> ID = "REPDOWNMENU1" data-toggle = "REPDOWN">
القائمة المنسدلة
<span> </span> </button> <ul rom = "menu" aria-labelledby = "sropdownmenu1"> <li rob = "presentation"> <a roly = "menuitem" tabindex = "-1" href = "#"#" العنصر </a> </li> <li rob = "عرض تقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> المنسدلة عن عنصر القائمة </a> </li> <li rom = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" href = "#" rob = "العرض التقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"> المنسدلة عناصر القائمة </a> </li> </ul> </viv> <br/> <br/> <h4> يتم محاذاة القائمة المنسدلة مع القائمة المنسدلة مع الجانب الأيسر من حاوية الوالدين </h4> <div style = " data-toggle = "REPDOWN">
القائمة المنسدلة
<span> </span> </button> <ul rom = "menu" aria-labelledby = "sropdownmenu1"> <li rob = "presentation"> <a roly = "menuitem" tabindex = "-1" href = "#"#" العنصر </a> </li> <li rob = "عرض تقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> المنسدلة عن عنصر القائمة </a> </li> <li rom = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" href = "#" دور = "عرض تقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"
في الواقع ، أضف اسم فئة "السحب اليمين" أو "القائمة المنسدلة-اليمين" على "القائمة المنسدلة" ، حيث رمز نمط CSS
.dropdown-menu.pull-right {يمين: 0 ؛ اليسار: auto ؛}. القائمة المنسدلة-رايت {يمين: 0 ؛ اليسار: auto ؛}قائمة المنسدلة (حالة عنصر القائمة)
تحتوي الحالة الافتراضية لعنصر القائمة المنسدلة (بدون إعداد)
بالإضافة إلى حالتين أعلاه ، فإن عناصر القائمة المنسدلة لها أيضًا الحالة الحالية (. الفعالة) والحالة المعوقة (.Disabled).
<div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </button> <ul rom = "menu" aria-labelledby = "href =" presiddown <s dropdow rob = "العرض التقديمي"> <a aro = "menuitem" tabindex = "-1" href = "#"> عنصر القائمة المنسدلة </a> </li> <li rob = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" "href ="#" rob = "menuitem" tabindex = "-1" href = "#"> عنصر القائمة المنسدلة </a> </li>
ضع الماوس عليه وسيتم عرض علامة محظورة على علامة تعطيل. لا يمكن إدراج لقطة الشاشة!
الأزرار (مجموعة الأزرار)
لا يلبي استخدام الأزرار الفردية في صفحات الويب أحيانًا احتياجات أعمالنا. غالبًا ما نرى أزرارًا متعددة مجتمعة معًا ، مثل مجموعة من أزرار الأيقونات الصغيرة في محرر نصية غنية.
<div> <button type = "button"> <span> </span> </utton> <button type = "button"> <span> </span> </utton> <button type = "button"> <span> </span> </button> <button type = "button"> </span> </span> </span> </sput type = "button"> <span> </span> </button> <button> <button type = "button"> <span> </span> </utton> <button> <button type = "button> <span> </span> </sutric> <button> <button> <button> <button> </" button " type = "button"> <span> </span> </utton> <button type = "button"> <span> </span> </utton> </viv>
صورة التكاثر:
هنا يمكنك إنشاء أزرار أيقونة مختلفة وفقًا لأيقونات مختلفة! يمكنك مشاهدته على هذا الموقع: http://getbootstrap.com/components/#glyphicons
أزرار (شريط أدوات الزر)
في محرر نصية غني ، مجموعات زر المجموعة معًا ، مثل النسخ ، وقطع ولصق مجموعة ؛ المحاذاة اليسارية ، المحاذاة المتوسطة ، المحاذاة اليمنى ، والمحاذاة ، كما هو موضح في الشكل أدناه:
ثم يوفر شريط أدوات زر إطار Bootstrap أيضًا طريقة صنعها. ما عليك سوى وضع مجموعة الأزرار "BTN-Group" في مجموعات في حاوية كبيرة "BTN-Toolbar" ، كما هو موضح أدناه:
<viv> <viv> <button type = "button"> <span> </span> </button> <button type = "button"> </span> </button> <button type = "button"> </span> </button> </iv> <div> <button type = "button" type = "button"> <span> </span> </button> </viv> <viv> <button type = "button"> </span> </suntre> </butting> </viv> <viv> <button type = "button> </span> </span> </sutn> </ button> <button> <button> <///////////button> <///////div type = "button"> <span> </span> </button> <button> </nutry> <button> <button> <button type = "button"> </span> </suntre> <button type = "button"> </span> </utton> </vir> <div> <button type =
صورة التكاثر:
تتم إضافة المجموعة الثانية من الرموز على الشكل مع فئة:
BTN-Group-LG: مجموعة زر كبيرة
BTN-Group-SM: مجموعة زر صغيرة
BTN-Group-XS: مجموعة زر Ultra-Small
فقط أضف اسم الفئة المقابلة إلى اسم فئة ".btn-group" للحصول على مجموعات الأزرار ذات الأحجام المختلفة.
الأزرار (التجميع المتداخل)
في كثير من الأحيان ، غالبًا ما نرتب القائمة المنسدلة ومجموعات الأزرار العادية لتحقيق تأثير مشابه لقائمة التنقل.
عند استخدامه ، تحتاج فقط إلى تغيير الحاوية التي أنشأت في الأصل "القائمة المنسدلة" من القائمة المنسدلة إلى "BTN-Group" ووضعها على نفس المستوى مثل الزر العادي.
<div> <button type = "button"> home </utton> <button type = "button"> عرض المنتج </button> <button type = "button"> تحليل الحالة </button> <button type = "button"> اتصل بنا </button> <viv> <button-toggle = "buttowdow الملف الشخصي </a> </li> <li> <a href = "##"> ثقافة الشركات </a> </li> <li> <a href = "##"
صورة التكاثر:
الأزرار (التجميع العمودي)
في المثال الذي شوهد سابقًا ، يتم عرض مجموعة الأزرار أفقياً. ولكن في الاستخدام الفعلي ، سيتم دائمًا مواجهة تأثير العرض الرأسي. يتم توفير هذا النمط أيضًا في إطار bootstrap. نحتاج فقط إلى تغيير اسم فئة "BTN-Group" للتجميع الأفقي إلى "BTN-Group-vertical"
<div> <button type = "button"> home </utton> <button type = "button"> عرض المنتج </button> <button type = "button"> تحليل الحالة </button> <button type = "button"> اتصل بنا </button> <viv> <button-toggle = "buttowdow الملف الشخصي </a> </li> <li> <a href = "##"> ثقافة الشركات </a> </li> <li> <a href = "##"
صورة التكاثر:
زر (زر متساو)
تأثير زر القطاع المتساوي عملي بشكل خاص على محطات الهاتف المحمول. عرض مجموعة الأزرار بأكملها هو 100 ٪ من الحاوية ، وكل زر في مجموعة الأزرار يقسم عرض الحاوية بأكمله. على سبيل المثال ، إذا كان لديك خمسة أزرار في مجموعة زر ، فإن كل زر هو عرض 20 ٪ ، إذا كان هناك أربعة أزرار ، فكل زر هو عرض 25 ٪ ، وهكذا.
غالبًا ما يسمى زر المعادلة زر التجميع التكيفي. طريقة التنفيذ بسيطة للغاية. تحتاج فقط إلى إضافة اسم فئة "BTN-Group" المعدل إلى مجموعة الأزرار "BTN-Group" كما هو موضح أدناه:
<viv> <viv> <a href = "#"> home </a> <a href = "#"> عرض المنتج </a> <a href = "#"> تحليل الحالة </a> <a href = "#"
تغيير عرض الشاشة
بيان خاص: عند إنشاء مجموعة أزرار ALIQUOT ، يرجى محاولة استخدام عنصر العلامة <a> لإنشاء أزرار ، لأنه عند استخدام عنصر العلامة <NUNTY> ، باستخدام العرض: الجدول ليس صديقًا لدعمه في بعض المتصفحات.
المثلث الصعودي لأعلى من الزر
المثلث الهبوطي للزر ، نضيف عنصر تسمية "" إلى الملصق وتسميته "Caret":
في بعض الأحيان ، ستظهر قائمتنا المنسدلة (القسم التالي ستقدمها). في هذا الوقت ، يجب عرض اتجاه المثلث لدينا لأعلى. طريقة التنفيذ: تحتاج إلى إضافة اسم فئة "Dropup" إلى فئة ".btn-group" (هذا هو أيضًا اسم الفصل الذي يجب استخدامه في القائمة المنسدلة المنبثقة لأعلى).
<div> <button data-toggle = "sropdown" type = "button"> زر القائمة المنسدلة <span> </span> </ultr button> <ul> <li> <a href = "##" البند </a> </li> </ul> </viv>
صورة التكاثر:
التنقل (النمط الأساسي)
الملاحة ليس غريباً على شخص أمامي. يمكن القول أن التنقل هو أحد العناصر المهمة لموقع الويب ، والتي يمكن أن تسهل المستخدمين للعثور على الخدمات الوظيفية المختلفة التي يوفرها الموقع. طريقة التنقل هي أيضا متنوعة جدا ومتنوعة.
تصنع قضبان التنقل بشكل رئيسي في إطار 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>
التنقل (التنقل في علامة التبويب على شكل علامة)
الملاحة على شكل علامة ، والمعروفة أيضًا باسم Tab Mavigation. خاصة عندما يتم عرض العديد من المحتويات في قطع ، فهي مناسبة جدًا لاستخدام علامة التبويب هذه لتجميعها.
يتم تنفيذ الملاحة على شكل علامة من خلال نمط "NAV-TABS". عند إنشاء التنقل على شكل علامة ، تحتاج إلى إضافة هذا النوع من الاسم إلى التنقل الأصلي "NAV"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
في الواقع ، فإن تأثير المثال أعلاه لا يتسق مع تأثيرات علامة التبويب التي نراها عادة. بشكل عام ، تقوم علامة التبويب بتدريس الاختيار الحالي. في الواقع ، يتم توفير إطار bootstrap أيضًا وفقًا لذلك. لنفترض أننا نريد أن يكون عنصر "الصفحة الرئيسية" هو العنصر المحدد حاليًا ، فقط أضف اسم الفئة "class =" Active "" إلى علامةه.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
صورة التكاثر:
بالإضافة إلى العنصر الحالي ، تحتوي بعض علامات التبويب أيضًا على حالة معطلة. لتحقيق هذا التأثير ، تحتاج فقط إلى إضافة "class =" تعطيل "إلى عنصر العلامة:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
صورة التكاثر:
التنقل (حبوب منع الحمل) الملاحة)
يبدو أن شكل الكبسولة (حبوب منع الحمل) يبدو محرجًا بعض الشيء لأنه يشبه شكل كبسولة. ولكن الأمر أشبه بالملاحة الجماعية التي نراها عادة. يتم تسليط الضوء على العنصر الحالي مع تأثير زاوية مستديرة. تشبه طريقة التنفيذ "NAV-TABS". مع نفس الهيكل ، تحتاج فقط إلى استبدال اسم الفصل "Nav-Tabs" بـ "Nav-Pills":
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
صورة التكاثر:
نفس الشيء المذكور أعلاه!
التنقل (الملاحة العمودية المكدسة)
في الاستخدام الفعلي ، بالإضافة إلى التنقل الأفقي ، هناك أيضًا تنقل رأسي ، تمامًا مثل أزرار الترتيب العمودي المقدمة سابقًا. يتطلب جعل الملاحة الرأسية المكدس فقط إضافة اسم فئة "مُصطاة NAV" يعتمد على "NAV-PILLS"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
صورة التكاثر:
في قسم القائمة المنسدلة ، يوجد مقسم بين مجموعة القائمة المنسدلة والمجموعة. في الواقع ، فإن التنقل العمودي المكدس له هذا التأثير أيضًا ، فأنت بحاجة فقط إلى إضافته "
" فقط:
<ul> <li> <a href = "##"> home </a> </li> <li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
صورة التكاثر:
التنقل التكيفي (الاستخدام)
يشير التنقل التكيفي إلى التنقل الذي يحتل عرض الحاوية بأكمله ، ويمكن أن تتكيف عناصر القائمة مع العرض مثل خلايا الجدول. التنقل التكيفي هو نفس مجموعة الأزرار التكيفية التي تم إجراؤها باستخدام "BTN-Group-Justified". إنه فقط عند صنع التنقل التكيفي ، اسم فئة آخر "NAV-تم تحديده". بالطبع ، يحتاج إلى استخدامه مع "Nav-Tabs" أو "Nav-Pills". يحب:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" HREF = "##"> متجاوبة </a> </li> </ul>
صورة التكاثر:
هذه شاشة مختلفة
قائمة التنقل بالإضافة إلى القائمة المنسدلة (التنقل الثانوي)
الأمثلة السابقة تدور حول استخدام إطار bootstrap لإنشاء التنقل من المستوى الأول ، ولكن في كثير من الحالات ، لا ينفصل تأثير التنقل من المستوى الثاني عن صفحة الويب. ثم من الأسهل إنشاء تنقل ثانوي في إطار bootstrap. ما عليك سوى التعامل مع LI كحاوية الأصل ، واستخدم اسم الفئة "المنسدلة" ، وقائمة أخرى في LI ، واستخدم الطريقة التي تم تقديمها في القائمة المنسدلة السابقة:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" data-toggle = "sropdow href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"
صورة التكاثر:
من خلال أداة تصحيح الأخطاء في المتصفح ، ليس من الصعب العثور على أنه من خلال النقر على عنصر القائمة مع التنقل الثانوي ، سيتم إضافة اسم الفصل "المفتوح" تلقائيًا. سيقوم النقر مرة أخرى بحذف اسم الفئة "فتح" المضافة ومبدأ التنفيذ في القائمة المنسدلة هو نفسه!
ثم ، عند استخدام الخط التقسيم في التنقل الثانوي ، تحتاج فقط إلى إضافة علامة فارغة مثل "<li class =" nav-divider "> </li>".
الملاحة الخبز
يتم استخدام فتات الخبز بشكل عام للتنقل ، ووظائفها الرئيسية هي إخبار المستخدم بالموقع الحالي للصفحة (الموقع الحالي)
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"
صورة التكاثر: