Tutorial Bootstrap Ikhtisar Plugin Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Data properti,API terprogram,Menghindari tabrakan namespace,peristiwa,
Pada bagian sebelumnyamembahas tata letak komponen untuk perakitan itu hanya awal.Bootstrap dilengkapi dengan 12 macam plugin jQuery meluas fungsi tersebut dapat ditambahkan ke situs lebih interaktif. Bahkan jika Anda bukan developer JavaScript canggih, Anda juga bisa mulai belajar Bootstrap JavaScript plug-in. API Gunakan Bootstrap Data (Bootstrap data API), sebagian besar plug-in dapat dipicu tanpa menulis kode apapun.
Situs Referensi steker Bootstrap dalam dua cara:
Jangan mencoba untuk mengutip dua file, dan karena bootstrap.jsbootstrap.min.js berisi semua plugin.
$ (Dokumen) .off ( '. Data-api')
$ (Dokumen) .off ( '. Alert.data-api')
Kami menyediakan cara untuk API JavaScript murni untuk semua plugin Bootstrap. Semua panggilan API publik yang didukung secara individu atau modus dirantai, dan mengembalikan satu set elemen beroperasi (Catatan: formulir dan memohon perjanjian jQuery). Sebagai contoh:
$ ( ". Btn.danger"). Button ( "beralih"). AddClass ( "gemuk")
Semua metode dapat mengambil pilihan opsional objek sebagai parameter, atau string yang mewakili suatu metode tertentu, atau tanpa parameter (dalam hal ini, itu akan menginisialisasi plug-in untuk perilaku default), sebagai berikut:
// Diinisialisasi untuk perilaku default $ ( "# myModal"). Modal () // Inisialisasi Keyboard tidak mendukung $ ( "# myModal") modal ({Keyboard: false}). // Inisialisasi dan memanggil acara segera $ ( "# MyModal"). Modal ( 'show')
Setiap plug-in di propertiKonstruktor juga menyebabkankonstruktor aslinya:$ .fn.popover.Constructor.Jika Anda ingin mendapatkan contoh dari widget tertentu Anda bisa mendapatkan langsung melalui elemen halaman:
$ ( '[Rel = popover]'). Data ( 'popover').
Kadang-kadang plugin Bootstrap mungkin perlu digunakan dengan kerangka UI lainnya. Dalam hal ini, tabrakan namespace dapat terjadi. Sayangnya, jika hal ini terjadi, Anda dapat mengembalikan nilai aslinya dengan memanggil metode widget.noConflict.
// Mengembalikan $ .fn.button sebelum nilai var ditetapkan bootstrapButton = $ .fn.button.noConflict () // Untuk $ yang (). Fungsi BootstrapBtn diberikan Bootstrap $ .fn.bootstrapBtn = BootstrapButton
Bootstrap menyediakan acara adat sebagai perilaku unik yang paling plug-in. Umumnya, peristiwa ini datang dalam dua bentuk:
$ ( '# MyModal'). Pada ( 'show.bs.modal', function (e) { // Mencegah kotak modal ditampilkan jika (Data!) Kembali e.preventDefault () })