Komponen yang dibahas dalam komponen tata letak bagian sebelumnya hanyalah permulaan. Bootstrap hadir dengan 12 plug-in jQuery, yang memperluas fungsi dan dapat menambahkan lebih banyak interaksi ke situs. Bahkan jika Anda bukan pengembang JavaScript tingkat tinggi, Anda dapat mulai belajar tentang plug-in JavaScript untuk Bootstrap. Dengan API Data Bootstrap (Bootstrap Data API), sebagian besar plug-in dapat dipicu tanpa menulis kode apa pun.
Ada dua cara untuk merujuk ke plugin Bootstrap di situs :
Referensi Individual: File Individual *.JS Menggunakan Bootstrap. Beberapa komponen plug-in dan CSS mengandalkan plug-in lainnya. Jika Anda merujuk ke plugin secara terpisah, pastikan untuk meminta dependensi antara plugin ini terlebih dahulu.
Referensi Compile (Simultan): Gunakan bootstrap.js atau versi terkompresi bootstrap.min.js.
"Jangan mencoba merujuk kedua file secara bersamaan, karena bootstrap.js dan bootstrap.min.js keduanya berisi semua plugin."
Semua plugin bergantung pada jQuery. Jadi jQuery harus direferensikan sebelum file plugin. Silakan kunjungi bower.json untuk melihat versi bootstrap versi jQuery yang saat ini didukung.
1. Atribut Data
Anda dapat menggunakan semua plugin Bootstrap hanya melalui API atribut data tanpa menulis satu baris kode JavaScript. Ini adalah API kelas satu di Bootstrap dan juga harus menjadi metode pilihan Anda.
Kemudian lagi, fitur ini mungkin perlu dimatikan dalam beberapa kasus. Oleh karena itu, kami juga menyediakan cara untuk menutup API atribut data, yaitu membatalkan peristiwa yang mengambil data-API sebagai namespace dan mengikat dokumen. Sama seperti ini:
$ (dokumen) .off ('. Data-API')
Untuk menutup plug-in tertentu, cukup tambahkan nama plug-in sebagai namespace sebelum namespace data-API, seperti yang ditunjukkan di bawah ini:
$ (dokumen) .off ('. ALERT.DATA-API')
2. Pemrograman API
Kami menyediakan API berbasis JavaScript murni untuk semua plugin bootstrap. Semua API publik mendukung metode panggilan individu atau rantai dan mengembalikan serangkaian elemen yang mereka operasikan (Catatan: Konsisten dengan formulir panggilan JQuery). Misalnya:
$ (". Btn.Danger"). Tombol ("sakelar"). AddClass ("Fat")Semua metode dapat menerima objek opsi opsional sebagai parameter, atau string yang mewakili metode tertentu, atau tanpa parameter apa pun (dalam hal ini, plug-in akan diinisialisasi sebagai perilaku default), seperti yang ditunjukkan di bawah ini:
// Inisialisasi ke perilaku default $ ("#mymodal"). Modal () // Inisialisasi untuk tidak mendukung keyboard $ ("#myModal"). Modal ({keyboard: false}) // inisialisasi dan hubungi tunjukkan $ ("#mymodal"). Modal ('show')Setiap plugin juga memperlihatkan konstruktor aslinya pada properti konstruktor: $ .fn.popover.constructor. Jika Anda ingin mendapatkan instance plugin tertentu, Anda bisa mendapatkannya langsung melalui elemen halaman:
$ ('[rel = popover]'). Data ('Popover').
3. Hindari konflik namespace
Terkadang plug-in bootstrap mungkin perlu digunakan dengan kerangka kerja UI lainnya. Dalam hal ini, konflik namespace dapat terjadi. Jika ini sayangnya terjadi, Anda dapat mengembalikan nilai aslinya dengan memanggil metode. Noconflict plugin.
// Kembalikan nilai yang ditetapkan sebelum $ .fn.button var bootstrapbutton = $ .fn.button.noconflict () // Tetapkan fungsi bootstrap ke $ (). Bootstrapbtn $ .fn.bootstrapbtn = bootstrapbutton
4. Acara
Bootstrap menyediakan acara khusus untuk perilaku unik sebagian besar plugin. Secara umum, peristiwa ini datang dalam dua bentuk:
Kata kerja Infinitive: Ini akan dipicu di awal acara. Misalnya Ex: Tampilkan. Acara Infinitive Kerja Menyediakan Fungsi PreventDefault. Ini memungkinkan pelaksanaan operasi dihentikan sebelum acara dimulai.
$ ('#mymodal'). on ('show.bs.modal', function (e) {// Cegah tampilan kotak modal jika (! Data) return e.preventDefault ()})Formulir Partitchle Past: Ini akan dipicu setelah tindakan dieksekusi. Misalnya Ex: Tampilkan.
Di atas adalah gambaran sederhana dari plug-in bootstrap. Saya harap akan sangat membantu bagi semua orang untuk memahami plug-in bootstrap.