يوفر Boostrap 12 مكونات إضافية JavaScript ، بما في ذلك:
انتقال الرسوم المتحركة
مشروط
القائمة المنسدلة
Scrollspy
فاتورة غير مدفوعة
تلميح مربع مربع
بوبوفر
مربع تحذير تنبيه
زر
ينهار
كاروسيل دوار
وضع تلقائي في وضع اللصفة العائمة
نافذة منبثقة مشروطة
<viv> <viv> <viv> <viv> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4> العنوان المشروط </h4> </viv> <vis> <p> هذا هو ما يظهره نافذة المنبثقة ... Data-Dismiss = "Modal"> حفظ </button> </viv> </viv> </viv>
القائمة المنسدلة
الاستخدام التصريحي
بشكل عام ، يتم تنفيذ القائمة المنسدلة على شريط التنقل (NavBar) وعلامة التبويب (علامة التبويب).
<div id = "nav-example"> <a href = "#"> اسم المشروع </a> <ul rom = "savigation"> <li> <a data-toggle = "tropown" rob = "button" href = "#" id = "drop1 HREF = "#" tabindex = "-1" ver = "menuitem"> الإجراء 1 </a> </li> <li rob = "العرض التقديمي"> <a href = "#" tabIndex = "-1" prow = "menuitem> action2 </a> </li> <li rob = </li></ul> </li> <li> <a data-toggle = "REPDOWN" rob = "button" href = "#" id = "drop2"> sropdown2 <b> </b> </a> <ul aria-labelledby = "drop2" rol = "menu"> <li rob = "presentation"> <a href = " rob = "menuitem"> Action4 </a> </li> <li rob = "عرض التقديمي"> <a href = "#" tabindex = "-1" rom = "menuitem"> action5 </a> </li> <li rob = "العرض التقديمي"> </li></ul> </li> </ul> </viv>
فاتورة غير مدفوعة
<٪-علامة تبويب شريط التنقل-٪> <ul> <li> <a href = "#home" data-toggle = "tab"> الصفحة الرئيسية </a> </li> <li> <a href = "#profile" data-toggle = "tab"> profile </a> </li> <li> HREF = "#SETETSS" data-toggle = "tab"> إعدادات </a> </li></ul> <٪-Tab Panel-٪> <viv> <div id = "home"> home ... </div> <div id = "profile"> </viv> <div id = "messages"
مربع موجه
<button data-original-title = "tooltip on left" data-toggle = "tooltip" data-placement = "left"> tooltip على اليسار </button> <button-button-original-title = "tooltip on top" data-toggle = "tooltip" data-placement = "top" tool on top </button-originال data-toggle = "tooltip" data-placement = "bottom"> tooltip في أسفل </button> <زر البيانات-الأزرق-title = "tooltip على" data-toggle = "tooltip" data-placement = "bottom"> tooltip on bottom </button-button-data-title = "toodtip tood tood".
مربع تحذير
<viv> <button data-mismiss = "Alert" type = "button"> x </butting> <h4> عنوان التحذير </h4> <p> قم بتغيير هذا وذلك وحاول agoin. </p> </viv>
طية
<div id = "orcordion"> <viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#orcordion" href = "#orcordion"> trigger element#1 </a> </h4> </viv> <div id = "cllapseone"
تدوير الكاروسيل
<Div Data Ride = "Carouse1" id = "Container"> <٪ ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-slide-to = "2" target = "#container"> </li> </ol> <٪-أزرار التحكم اليسرى واليسرى-٪> <a data-slide = "prev" href = "#container"> <span> </a> </a> <a data-slide = "prev" href = "#container"
ما سبق هو الفصل المكون من JavaScript من البرنامج التعليمي الأساسي Boostrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!