بعد تنزيل Bootstrap وتثبيته ، يمكنك العثور على 12 ملف JS في ملفات D:/برنامج NODEJS/NODE_MODULES/BOOTSTRAP/JS. ملفات JS هذه هي 12 jQuery المكونات التي تأتي مع bootstrap. يمكنك أيضًا العثور على bootstrap.js و bootstrap.min.js في ملفات D:/البرنامج/nodejs/node_modules/bootstrap/dist/js. يحتوي كلا الملفين على 12 مكونات إضافية.
من بين هذه المكونات الإضافية الـ 12 jQuery ، الأكثر شيوعًا هي الصورة carousel.js ، تبديل العلامات .
(ط) صورة carousel.js
يمكن أن تضع Carousel الصورة حجم الصورة ، والموقف ، وما إلى ذلك في CSS حسب الحاجة.
تتطلب صورة Carousel إدخال jQuery.min.js و carousel.js ، أو transition.js لإضافة تأثيرات انتقالية.
<viv> <viv> <viv> <!-data-ride = "carousel" يتم استخدام سمة للاحتفال بالركض الذي يبدأ تشغيل الرسوم المتحركة عندما يتم تحميل الصفحة-> <div data ride = "carousel" id = "carousel-332839"> <ol> <li data-to = "0" data-darget = " data-slide-to = "1" data-arget = "#carousel-332839"> </li> <li data-slide-to = "2" data-arget = "#carousel-332839"> </li> </ol> <liv> <viv> <iv> <p> Cras Justo Odio ، Dapibus AC facilisis in ، egestas eget quam. Donec ID ELIT NON MI Porta Gravida في Eget Metus. nullam id dolor id nibh intricies learicula ut id elit. </p> </viv> </viv> <viv> <img src = "Images/Desert.jpg"/> <viv> <h4> تسمية Thumbnail الثانية </h4> <p> Cras Justo Odio ، dapibus ac facilisis in ، egstas eget quam. Donec ID ELIT NON MI Porta Gravida في Eget Metus. nullam id dolor id nibh intricies learicula ut id elit. </p> </viv> </viv> <viv> <img src = "Images/adadrangeas.jpg"> <viv> <h4> تسمية Thumbnail الثالثة </h4> <p> Cras Justo Odio ، dapibus ac facilisis in ، egstas eget quam. Donec ID ELIT NON MI Porta Gravida في Eget Metus. nullam id dolor id nibh intricies learicula ut id elit. </p> </viv> </viv> </viv> <a href = "#carousel-332839" data-slide = "prev"> <span> </aa> <a href = "#carousel-332839" data-slide = "next">
(2) تبديل العلامات.
يتطلب تبديل العلامة إدخال jQuery.min.js و tab.js ، أو transition.js لإضافة تأثيرات انتقالية.
<viv> <viv> <viv> <div id = "tabs-440751"> <ul> <li> <a href = "#panel-1" data-toggle = "tab"> القسم 1 </a> </li> <li> <shref = "#panel-2" data-toggle = "tab" </a> </p> </viv> <div id = "panel-2"> <p> أنا في القسم 2. </p> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv>
(3) التمرير الاستماع إلى scrollspy.js وقائمة القائمة المنسدلة
اجمع بين قوائم التمرير والقوائم المنسدلة لإنشاء شريط تنقل يمكنه التمرير والاستماع بقائمة منسدلة.
تحتاج إلى ضبط نمط ، أسلوب هذا المثال هو:
.A ، .b {الارتفاع: 500px ؛ العرض: 100 ٪ ؛}يجب تقديم jquery.min.js ، replowdown.js ، scrollspy.js.
<body data-spy = "scroll" data-arget = "#navbarexample"> <viv> <viv> <viv> <viv> <div> <div id = "navbarexampl التنقل </span> <span> </span> <span> </span> <span> </span> <span> </span> </utton> <a href = "#" رابط href = "#2"> </a> </li> <li> <a href = "#3" data-toggle = "sropdown"> tropown <strong> </strong> </a> <ul> <li> <a href = "#" هنا </a> </li> <li> <a href = "#"> رابط منفصل </a> </li> <li> <a href = "#" <button type = "submit"> إرسال </button> </form> <ul> <li> <a href = "#4"> الرابط </a> </li> <li> <s href = "#5" data-toggle = "dropdown "> منسدلة <strong> </strong> </a> <ul> <li> الإجراء </a> </li> <li> <a href = "#"> شيء آخر هنا </a> </li> <li> </li> <li> <a href = "#"> رابط منفصل </a> </li> </li> </li> </li> </li> </li> data-arget = "#navbarexample">-> <viv> <div id = "1"> </viv> <div id = "2"> </div> <div id = "3"> </div> <div id = "4"> </viv> <div id = "5" </viv> </viv> </body> </html>
(رابع)
تحتاج إلى تقديم jquery.min.js و modal.js ، أو يمكنك تقديم transition.js لإضافة تأثيرات الانتقال.
<viv> <viv> <a id = "modal-732948" href = "#modal-container-732948" rob = "button" data-toggle = "modal"> تشغيل العرض التوضيحي </a> <div id = "modal-container-732948" rob = "dialog" aria-labelled = <div> <viv> <viv> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> عنوان modal </h4> </h4> </div> ... </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </div> </div> </viv> </viv> </viv> </viv> </viv> </viv> </div>
(5)
تحتاج إلى تقديم jquery.min.js و tooltip.js ، أو يمكنك تقديم transition.js لإضافة تأثيرات الانتقال.
أيضًا ، لا يشبه المكون الإضافي الآخر ، فهو ليس مكونًا إضافيًا CSS نقيًا. لاستخدام هذا البرنامج المساعد ، يجب عليك استخدام jQuery لتفعيله.
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip () ؛}) ؛ <style body = "padding: 100px ؛" > <a href = "#" data-toggle = "tooltip"> tooltip الافتراضية </a> <br/> <a href = "#" data-toggle = "tooltip" data-placement = "left"> tooltip على toop </a> <br/> <a href = "#" toggle = "tooltip" <a href = "#" data-toggle = "tooltip" data-placement = "bottom"> tooltip في الأسفل </a> <br/> <a href = "#" data-toggle = "tooltip" data-placement = "right" type = "button" data-toggle = "tooltip" data-placement = "left"> tooltip على اليسار </button> <br/> <button type = "button" data-toggle = "tooltip" data-patip = "top" <button type = "button" data-toggle = "tooltip" data-placement = "right"> tooltip على اليمين </button> </body>مشاركة موضوع رائع: صورة jQuery carousel JavaScript Picture carousel bootstrap picture carousel
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام جدول التمهيد
تم تجميع هذه المقالة في "تعليمي استخدام المكون الإضافي Bootstrap" ، وكل شخص مرحب به للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.