Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat. Selanjutnya, melalui artikel ini, saya akan memperkenalkan kepada Anda contoh penggunaan plug-in Bootstrap Lipat (Collapse). Mari kita lihat!
Plugin Collapse memudahkan untuk melipat area halaman. Apakah Anda menggunakannya untuk membuat navigasi yang runtuh atau panel konten, itu memungkinkan banyak opsi konten.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi collapse.js. Pada saat yang sama, Anda juga perlu merujuk plugin transisi di versi bootstrap Anda. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
Anda dapat menggunakan plugin Collapse:
Buat panel pengelompokan atau lipat yang dapat dilipat sebagai berikut:
<! Doctype html> <html> <head> <title> Bootstrap Instance - Panel lipat </iteme> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.js"> <cript "> <cript"> <cript "> <cript"> <crips "> <crips"> <cript "> </script"> <cript> <cript> <cript> <cript> <crips/scripts "> </scrips"> </script "> <cript> <cript> <cript> </script"> </script "> </script"> </script "> </scrips"> <cript> </scrips/scripts/jQuery. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <v id = "Accordion"> <div> <h4> <a data-kilat = "collapse" data-parent = "#akordeon" href = "#collapsone"> klik saya untuk memperluas, klik saya untuk menerbangkan lagi. Bagian 1 </a> </h4> </div> <div id = "collapsone"> <viv> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <viv> <h4> <a data-koggle = "collapse" data-parent = "#akordeon" href = "#collapsetwo"> klik saya untuk memperluas, klik saya untuk runtuh lagi. Bagian 2 </a> </h4> </div> <div id = "collapsetwo"> <verv> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <viv> <h4> <a data-koggle = "collapse" data-parent = "#akordeon" href = "#collapsethree"> Klik saya untuk memperluas, klik saya untuk runtuh lagi. Bagian 3 </a> </h4> </div> <div id = "collapsethree"> <verv> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excecteur Butcher Vice Lomo. </div> </div> </div> </div> </body> </html>
Hasilnya adalah sebagai berikut:
data-kilat = "collapse" ditambahkan ke tautan ke komponen yang ingin Anda kembangkan atau runtuh.
HREF atau properti target data ditambahkan ke komponen induk, dan nilainya adalah ID komponen anak.
Properti orang tua-orang tua menambahkan ID panel yang runtuh ke tautan komponen yang akan diperluas atau dikubur.
Buat komponen yang dapat dilipat sederhana tanpa tag akordeon, seperti yang ditunjukkan di bawah ini:
<! Doctype html> <html> <head> <title> bootstrap instance- komponen lipat sederhana </iteme> <link href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.js"> <cript script = "/scripts/jQuery.min.min"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <tombol type = "tombol" data-kilat = "collapse" data-target = "#demo"> komponen lipat sederhana </button> <div id = "demo"> nihil anim anim kefiyeh helvetica, craft boring wesone nihil nihil anim anim kefiyeh helvetica, craft boring weson nihil nihil anim anim kefiyeh helvetica, craft boring wesone nihil nihil anim anim kefiyeh helvetica, craft boring weson nihil nihil anim anim kefiyeh helvetica, craft boring weson nihil nihil anim anim kefiyeh helvetica, craft boring. AD Vegan Excecteur Butcher Vice Lomo. </div> </body> </html>
Hasilnya adalah sebagai berikut:
Seperti yang dapat Anda lihat dalam instance, kami membuat komponen yang dapat dilipat, tidak seperti panel yang dilipat, kami tidak menambahkan data-orang tua properti.
penggunaan
Tabel berikut mencantumkan plug-in collapse untuk menangani penskalaan berat:
Anda dapat menggunakan plugin Collapse dengan dua cara:
Melalui atribut data: Tambahkan data-kilat = "collaps" dan target data ke elemen untuk secara otomatis menetapkan kontrol ke elemen yang dapat dilipat. Properti target data menerima pemilih CSS dan menerapkan efek keruntuhan untuk itu. Pastikan untuk menambahkan kelas .collapse ke elemen yang dapat dilipat. Jika Anda menginginkannya secara default, tambahkan kelas tambahan .in.
Untuk menambahkan manajemen pengelompokan seperti panel yang dilipat ke kontrol yang dapat dilipat, tambahkan data properti data-parent = "#pemilih".
Melalui JavaScript: Metode keruntuhan dapat diaktifkan melalui JavaScript, seperti yang ditunjukkan di bawah ini:
$ ('. Collapse'). Collapse ()Opsi
Ada beberapa opsi yang dilewatkan melalui properti data atau JavaScript. Tabel berikut mencantumkan opsi ini:
metode
Berikut adalah beberapa metode yang berguna dalam plugin collapse:
Contoh
Contoh berikut menunjukkan penggunaan metode:
<! Doctype html> <html> <head> <title> Bootstrap Instance - Metode plug -in collaps </iteme> <link href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.js"> <cript script = "/scripts/jQuery.min.min"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <v id = "Accordion"> <div> <h4> <a data-kilat = "collapse" data-parent = "#akordeon" href = "#collapsone"> klik saya untuk memperluas, klik saya untuk menerbangkan lagi. Bagian 1-Metode Hidup </a> </h4> </div> <div id = "collapsone"> <veT> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <viv> <h4> <a data-koggle = "collapse" data-parent = "#akordeon" href = "#collapsetwo"> klik saya untuk memperluas, klik saya untuk runtuh lagi. BAGIAN 2 -Metode Maha </a> </h4> </div> <Div ID = "Collapsetwo"> <div> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea procident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <viv> <div> <h4> <a data-koggle = "collaps" data-parent = "#akordeon" href = "#collapsethree"> klik saya untuk memperluas, klik saya untuk runtuh lagi. Bagian 3-Metode Combgle </a> </h4> </div> <div id = "Collapsethree"> <ver> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea procident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <viv> <h4> <a data-koggle = "collapse" data-parent = "#akordeon" href = "#collapsefour"> Klik saya untuk memperluas, klik saya untuk runtuh lagi. Bagian 4-Metode Opsi </a> </h4> </div> <div id = "CollapsEfour"> <div> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea procident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#collapsefour'). Collapse ({sakelar: false})}); $ (function () {$ ('#collapsetwo'). $ ('#collapsethree'). collapse ('sakelar')}); $ (function () {$ ('#collapsone'). Collapse ('hide')}); </script> </body> </html>Hasilnya adalah sebagai berikut:
peristiwa
Tabel berikut mencantumkan peristiwa yang akan digunakan dalam plug-in Collapse. Acara ini dapat digunakan sebagai pengait dalam fungsi.
Contoh
Contoh berikut menunjukkan penggunaan peristiwa:
<! Doctype html> <html> <head> <title> bootstrap instance - collapse plugin event </iteme> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.js"> <cript script = "/scripts/jQuery.min.min"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "Accordion"> <Div> <h4> <a data-kilat = "Collapse" data-parent = "#Accordion" href = "#collapseexample"> klik saya untuk berkembang, klik saya untuk bertambah lagi. --Shown Event </a> </h4> </div> <div id = "Collapseexample"> <verv> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excecteur Butcher Vice Lomo. </div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#collapseexample'). On ('show.bs.collaps', function () {waspada, </hei, </Badan <//</</</</</</</</</</</</</kembali </};Hasilnya adalah sebagai berikut:
Di atas adalah penjelasan terperinci dari contoh penggunaan plug-in lipat bootstrap (collapse) yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang!