ستقدم هذه المقالة قائمة Bootstrap والملاحة بشكل أساسي.
بدءًا من هذه المقالة ، سنقدم الملفات المتعلقة بـ JavaScript ، على النحو التالي:
<!-ضعه في نهاية علامة الجسم لجعل الصفحة تحميل بشكل أسرع->
<!-إذا كنت تريد استخدام المكون الإضافي JS الخاص بـ Bootstrap ، فيجب عليك أولاً الاتصال بـ jQuery->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-يتضمن جميع الإضافات Bootstrap JS أو ملحقات JS التي يمكن استخدامها حسب الحاجة->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
في Bootstrap ، يعد مكون القائمة المنسدلة مكونًا مستقلًا. يعتمد تأثير التفاعل لمكون Bootstrap على المكونات الإضافية التي كتبها مكتبة jQuery ، لذلك قبل استخدام bootstrap.min.js ، يجب أولاً تحميل jQuery.min.js لتسريعها.
1. استخدام القائمة المنسدلة
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> الاستخدام الأساسي للقائمة المنسدلة </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css style-> <style> body {margin: 50px ؛ padding: 50px ؛} </style> </head> <body> <viv> <button type = "button" id = "sropdownmenu1" data-toggle = "dropdown"> sportown <span> </span> </ultr button> <ul button = "menu" aria labelledbaby = " rob = "menuitem" tabindex = "-1" href = "#"> menu1 </a> </li> <li rob = "العرض التقديمي"> <a reb = "menuitem" tabindex = "-1" href = "#"> menu2 </a> </li> <! tabindex = "-1" href = "#"> menu3 </a> </li> <!-اضبط حالة عنصر القائمة على تعطيل (.disabled)-> <li reb = "العرض التقديمي"> <a tome = "menuitem" tabindex = "-1" href = "#" tabindex = "-1" href = "#"> القائمة 4 </a> </li> <li rob = "عرض تقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#" rob = "العرض التقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"> القائمة 6 </a> </li> </ul> </viv> <!-ضعه في نهاية المستند لجعل تحميل الصفحة بشكل أسرع-<!-إذا كنت ترغب في استخدام البرنامج المساعد JS للأحذية ، يجب عليك الاتصال أولاً-> < src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-بما في ذلك جميع الإضافات JS لل pootstrap أو JS التي يمكن استخدامها حسب الحاجة-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>ملاحظة: في بعض الأحيان ، هناك حاجة إلى الارتداد للأعلى ، لذلك تحتاج فقط إلى إضافة اسم فئة "Dropup" إلى اسم الفئة "المنسدلة".
العروض كما يلي:
2. محاذاة القائمة المنسدلة
القائمة المنسدلة في bootstrap هي محاذاة اليسار بشكل افتراضي. إذا كنت ترغب في أن تكون القائمة المنسدلة محاذاة بالنسبة للحاوية الأصل ، فيمكنك إضافة اسم فئة "السحب اليمين" أو "المنسدلة-اليمين" إلى "القائمة المنسدلة" ، كما هو موضح أدناه:
<!-جزء تم حذفه مثل الكود في 1-> ... <div> <button type = "button" id = "sropdownmenu1" data-toggle = "sropdown "> menudown menuded <span> </span> </button> <ul rol =" menut "aria-labelledby =" hrefdown1> <li rob = "presentation"> عنصر القائمة </a> </li> <li rob = "العرض التقديمي"> <a rob = "menuitem" tabindex = "-1" href = "#"> عنصر القائمة المنسدلة </a> </li> </ul> </iv> ...
العروض كما يلي:
3. مجموعة زر بوت
مجموعة الأزرار هي أيضًا مكون مستقل. يحتاج إلى الاعتماد على المكون الإضافي button.js لتشغيله بشكل طبيعي. و bootstrap.js قامت بدمج وظيفة المكونات الإضافية Button.js.
الاستخدام: استخدم حاوية "BTN-Group" ووضع أزرار متعددة في هذه الحاوية. كما هو موضح أدناه:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> مجموعة زر </title> <link rel = "stylesheet" href = "http://netdna الجسم {margin: 30px ؛ padding: 30px ؛ } </style> </head> <body> <viv> <div> <button type = "button"> <span> </span> </trade> <button type = "button"> <span> </span> </nutry> <button> button> button> </span> </span> </span> type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </suntre> <button type = "button"> <span> </span> </button> <button> button> "button> </span> </span> type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </suntre> <button type = "button"> <span> </span> </button> <button> button> "button> </span> </span> اكتب = "button"> <span> </span> </button> </div> <!-ضعه في نهاية المستند لجعل الصفحة تحميل بشكل أسرع-> <!-إذا كنت تريد استخدام مكون الإضافي JS من bootstrap ، يجب عليك أولاً استدعاء jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-بما في ذلك جميع الإضافات src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>العروض كما يلي:
4. الأزرار - التجميع المتداخل
في كثير من الأحيان ، غالبًا ما نرتب القائمة المنسدلة ومجموعات الأزرار العادية لتحقيق تأثير مشابه لقائمة التنقل. عند استخدام التجميع المتداخل لأزرار bootstrap ، تحتاج فقط إلى استبدال الحاوية "المنسدلة" التي جعلت القائمة المنسدلة بـ "BTN-Group" ووضعها على نفس مستوى الأزرار العادية. كما هو موضح أدناه:
<!-أجزاء تم حذفها مثل الكود في 3-> ... <div> <button type = "button"> home </utton> <viv> <button data-toggle = "type" type = "button"> تطوير الهاتف المحمول <span> </span> </button> <ul> <li> <a href = "##" </div> <button type = "button"> Java Web Development </utton> <button type = "button"> php development </utton> <button type = "button"> big data </utton> </viv> ...
العروض كما يلي:
في الاستخدام الفعلي ، سيتم دائمًا مواجهة تأثير العرض العمودي. يتم توفير هذا النمط أيضًا في bootstrap. نحتاج فقط إلى تغيير اسم فئة "BTN-Group" للتجميع الأفقي إلى "BTN-Group-etterical" لتحقيق التجميع الرأسي للزر.
5. زر التكافؤ
زر التنفيذ للزر المعادلة (زر التجميع التكيفي) بسيط للغاية. تحتاج فقط إلى إضافة اسم فئة "BTN-Group" المعدل إلى مجموعة الأزرار "BTN-Group" كما هو موضح أدناه:
<viv> <a href = "#"> ثالث واحد </a> <a href = "#"> ثالث واحد </a> <a href = "#"
العروض كما يلي:
6. التنقل - الاستخدام الأساسي
يتم صنع قضبان الملاحة بشكل رئيسي في bootstrap من خلال نمط ".NAV". . لا يجب أن تكون "ناف" بأسلوب آخر فعالًا ، مثل "Nav-Tabs" ، "Nav-Pills" ، إلخ.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> استخدام الملاحة basic </title> <link rel = "stylesheet" href = "http://netdna.bootsstrapcdn.com/bootstrap/3. style-> <style> body {margin: 30px ؛ padding: 30px ؛} </style> </head> <body> <ul> <li> <a href = "##"> home </a> </li> <li> <li> <a href = "##" التنقل-> <li> <a href = "##"> المنتدى </a> </li> <!-الحالة المعطلة-> <li> <a href = "##"> التغذية المرتدة </a> </li></ul> <!-ضعها في نهاية الوثيقة لجعل تحميل الصفحة بشكل أسرع-> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-بما في ذلك جميع الإضافات JS لل pootstrap أو JS يمكن تسميتها حسب الحاجة-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>العروض كما يلي:
7. التنقل في الملاحة (حبوب منع الحمل)
التنقل في الكبسولة (حبوب منع الحمل) ، يتم تمييز العنصر الحالي ، وله تأثير زاوية مستديرة. فقط استبدل اسم الفصل "Nav-tabs" بـ "Nav-Pills":
<ul> <!-الحالة الحالية-> <li> <a href = "##"> home </a> </li> <!-الحالة المعلقة-> <li> <a href = "##"> news </a> </li> <li> <li> <a href = "##" data-toggle = "sropdown" HREF = "##"> المدونة الواجهة الأمامية </a> </li> <li> <a href = "##" java blog </a> </li> </li> </li> <li> <a href = "##"> forum </a> </li> <!
العروض كما يلي:
8. التنقل - الملاحة العمودية المكدسة
لإنشاء التنقل العمودي المكدس ، تحتاج فقط إلى إضافة اسم فئة "مُصطاة NAV" يعتمد على "Nav-Pills":
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> news </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##" Href = "##"> التغذية المرتدة </a> </li> </ul>
العروض كما يلي:
9. التنقل - التنقل التكيفي
يجب استخدام الملاحة التكيفية "NAV-LURKISED" (يرجى الرجوع إلى ملف bootstrap.css ، السطر 3585 إلى السطر 3607) بالاقتران مع "Nav-tabs" أو "Nav-Pills". يحب:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> news </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##" Href = "##"> التغذية المرتدة </a> </li> </ul>
العروض كما يلي:
10. الملاحة
يعد Breadcrumb أيضًا مكونًا مستقلًا للوحدة ، ويستخدم عمومًا للتنقل ، ووظائفه الرئيسية هي إخبار المستخدم بالموقع الحالي للصفحة (الموقع الحالي). طريقة الاستخدام بسيطة للغاية ، أضف فئة Breadcrumb إلى OL:
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> الصين </a> </li> <li> beijing </li> </ol>
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.