Setelah Bootstrap diunduh dan diinstal, Anda dapat menemukan 12 file JS di D:/Program Files/NodeJS/Node_Modules/Bootstrap/JS. File JS ini adalah 12 plug-in jQuery yang datang dengan Bootstrap. Anda juga dapat menemukan bootstrap.js dan bootstrap.min.js di file d:/program/nodeJs/node_modules/bootstrap/dist/js. Kedua file berisi 12 plug-in jQuery.
Di antara 12 plug-in jQuery ini, yang paling umum digunakan adalah gambar carousel.js, tag switching tab.js, menggulir scrollspy.js, dropdown list dropdown.js, modul box pop-up Modal.js dan prompt box tooltip.js .
(I) Bayangkan carousel.js
Picture Carousel dapat mengatur ukuran gambar, posisi, dll. Dalam CSS sesuai kebutuhan.
Gambar Carousel membutuhkan pengenalan jQuery.min.js dan carousel.js, atau transisi.js dapat diperkenalkan untuk menambahkan efek transisi.
<div> <div> <div> <!-atribut data-ride = "carousel" digunakan untuk menandai carousel yang memulai pemutaran animasi ketika halaman dimuat-> <div data-ride = "carousel" id = "carousel-332839"> <ol> <li-slide-to = "0" data-target = "#carousel- data-slide-to = "1" data-target = "#carousel-332839"> </li> <li data-slide-to = "2" data-target = "#carousel-332839"> </li> </ol> <v> <ver> <mg src = "gambar/chrysanthem. <p> cras justo odio, fasilis DAPIBUS AC, Egestas Eget Quam. Donec id elit non mi porta gravida di Eget Metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div> <img src = "gambar/gurun Donec id elit non mi porta gravida di Eget Metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div> <img src = "images/hydrangeas.jpg"> <div> <h4> label thumbnail ketiga </h4> <p> CRA Justo odio, fasilis DAPIBUS AC di, Egstas Eget Quam. Donec id elit non mi porta gravida di Eget Metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> </div> <a href = "#carousel-332839" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-332839" div-slide = "next"> <pan> </span> </a>
(Ii) Tag switching tab.js
Tag switching memerlukan pengenalan jQuery.min.js dan tab.js, atau transisi.js dapat diperkenalkan untuk menambahkan efek transisi.
<div> <div> <div> <div id="tabs-440751"> <ul> <li> <a href="#panel-1" data-toggle="tab">Section 1</a> </li> <li> <a href="#panel-2" data-toggle="tab">Section 2</a> </li> </ul> <div> <div id="panel-1"> <p> I'm in Bagian 1. </p> </div> <div id = "Panel-2"> <p> Saya di bagian 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(Iii) menggulir mendengarkan scrollspy.js dan dropdown list dropdown.js
Gabungkan daftar pengguliran dan tarik-turun untuk membuat bilah navigasi yang dapat menggulir dan mendengarkan dengan daftar drop-down.
Anda perlu mengatur gaya, gaya contoh ini adalah:
.a, .b {tinggi: 500px; Lebar: 100%;}. B {latar belakang-warna: white;}. A {latar belakang-color: black;}jquery.min.js, dropdown.js, scrollspy.js perlu diperkenalkan.
<body data-spy = "gulir" data-target = "#navbarexample"> <div> <div> <div> <div> <div id = "navbarexample"> <Div> <tombol type = "Tombol" data-collapse-collaps = "collapse" target = "#bs-example-navbar-collapse-1> Navigasi </span> <span> </span> <span> </span> <span> </span> <span> </span> </button> <a href = "#"> Brand </a> </div> <v id = "BS-example-navbar-collapse-1"> <l> <li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <Li> <A HREF = "#1 "> href="#2">Link</a> </li> <li> <a href="#3" data-toggle="dropdown">Dropdown<strong></strong></a> <ul> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form role="search"> <div> <input type="text"> </div> <typute type = "kirim"> Kirim </button> </form> <ul> <li> <a href = "#4"> tautan </a> </li> <li> <a href = "#5" Data-koggle = "dropdown"> <strong> </strong> </a> </a> <ul> <a li> <a hr = "" href = "#"> Tindakan lain </a> </li> <li> <a href = "#"> sesuatu yang lain di sini </a> </li> <li> </li> <li> <a href = "#"> tautan yang terpisah </a> </li> </li> </li> </li> </li> </Ul> </Div> </li> </Li> </li> </li> </li> </Ul> </Div> </li> </Li> </li> </li> </li> </Ul> </Div> </li> </Li> </li> </li> </li> </Ul> </Div> </li> </li> data-spy = "scroll" data-target = "#navbarexample">-> <v> <div id = "1"> </div> <div id = "2"> </div> <div id = "3"> </Div> <div = "4"> </Div> <Div = "5"> </Div> </Div> </Div> </Div> </Div =/5 "> </Div> Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </div> </div> </div> </div> </body> </html>
(Iv) Modal Modal Pop-Up Modal.js
Anda perlu memperkenalkan jquery.min.js dan modal.js, atau Anda dapat memperkenalkan transisi.js untuk menambahkan efek transisi.
<dv> <div> <a id = "modal-732948" href = "#modal-container-732948" role = "button" data-kunyah = "modal"> Modal Demo Peluncuran </a> <div id = "Modal-Container-732948 Peran" Peran = "Dialog" "Myia-labelled = Myia" myia "myia" myia "myia" myia " <v div> <v> <Tombol tipe = "tombol" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> judul modal </h4> </div> <v> </div> <v> <"kancing tipe =" tombol "Data-Dismiss =" Modal "> TUTUP </DIV> </Div> Tombol Tombol =" Tombol "Data-Dismiss =" Modal "> Tutup </Tutup </ </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(V) Prompt Box Tooltip.js
Anda perlu memperkenalkan jquery.min.js dan tooltip.js, atau Anda dapat memperkenalkan transisi.js untuk menambahkan efek transisi.
Juga, plugin Tooltip tidak seperti plugin lain, ini bukan plugin CSS murni. Untuk menggunakan plugin ini, Anda harus menggunakan jQuery untuk mengaktifkannya.
$ (function () {$ ("[data-koggle = 'tooltip']"). tooltip ();}); <body style = "padding: 100px;" > <a href = "#" data-koggle = "tooltip"> Tooltip default </a> <br/> <a href = "#" data-koggle = "tooltip" data-placement = "kiri"> TOURPIP KIRIP </a> <br/> <a href = "#"#"#" Data-TOGGLE = "ON" ONPLEP = "TOPLEP =" TOPLEP = "#"#"#"#"#" DATAGLE = "ONPLEP =" TOPLEP = "DATEP ="#"#"#"#"#"#"#"#"#"#"#"#" <br/> <a href = "#" data-koggle = "tooltip" data-placement = "Bottom"> tooltip di bagian bawah </a> <br/> <a href = "#" data-toggle = "Tooltip" Data-Placement = "Right" Tooltip di kanan </a> <br/> <br/> TypeP = "TOLUPPLE"> TOUPPLE "TOUPPLE" TOLUPPLE "TOLUPPLE" TOUPPLE "TOUPPLE" TOUPPLE "TOUPPLE" TOUPPLE "TOULPGLE" TOUPPLE "TOUPPLE" TOULPGLE </a> <br/a> <br/> <button type="button" data-toggle="tooltip" data-placement="left">Tooltip on the left</button> <br/> <button type="button" data-toggle="tooltip" data-placement="top">Tooltip at the top</button> <br/> <button type="button" data-toggle="tooltip" data-placement="bottom">Tooltip at the Bottom </button> <br/> <tombol type = "tombol" data-koggle = "tooltip" data-placement = "right"> tooltip di kanan </atton> </body>Berbagi topik yang indah: gambar jQuery carousel javascript gambar carousel bootstrap carousel
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Tabel Bootstrap
Artikel ini telah dikompilasi ke dalam "Tutorial Penggunaan Plugin Bootstrap", dan semua orang dipersilakan untuk belajar dan membaca.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.