Latest web development tutorials

Bootstrap Ikhtisar Plugin

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:

  • Sendiri Quote: menggunakan terpisah* Jsfile dari Bootstrap.Beberapa plug-in dan CSS komponen tergantung pada plug-in. Jika Anda pasang referensi terpisah, pastikan mereka memahami ketergantungan antara plug-in.
  • Kompilasi (bersamaan) Quote: Gunakanbootstrap.jsatau versi kompresibootstrap.min.js.
    Jangan mencoba untuk mengutip dua file, dan karena bootstrap.jsbootstrap.min.js berisi semua plugin.
Semua plug-in mengandalkan jQuery. Anda harus dirujuk dalam file plugin sebelum jQuery. Kunjungi bower.json melihat Bootstrap versi saat ini didukung dari jQuery.

Data properti

  • Anda mungkin hanya dapat menggunakan semua data atribut Bootstrap Plugin API, tanpa menulis satu baris kode JavaScript. Ini adalah Bootstrap API kelas, harus dengan cara yang Anda pilih.
  • Kemudian lagi, dalam beberapa kasus, Anda mungkin perlu menonaktifkan fitur ini. Oleh karena itu, kami juga menawarkan metode API data atribut tertutup, yaitu untuk mengangkat data-apinamespace dan mengikat peristiwa dokumen. Seperti berikut: 
    $ (Dokumen) .off ( '. Data-api')
  • Untuk menutup tertentu plug-in, sebelum namespace Data-api ditambah nama widget sebagai namespace, seperti yang ditunjukkan di sini: 
    $ (Dokumen) .off ( '. Alert.data-api')

API terprogram

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').

Menghindari tabrakan namespace

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

peristiwa

Bootstrap menyediakan acara adat sebagai perilaku unik yang paling plug-in. Umumnya, peristiwa ini datang dalam dua bentuk:

  • Infinitif: ini akan dipicu ketika acara dimulai.Sepertiex: acara.Acara infinitif menyediakan fungsipreventDefault.Hal ini memungkinkan untuk menghentikan operasi sebelum acara dimulai. 
    $ ( '# MyModal'). Pada ( 'show.bs.modal', function (e) {
// Mencegah kotak modal ditampilkan jika (Data!) Kembali e.preventDefault () 
})
  • bentuk past participle: ini akan dipicu setelah operasi selesai.Sepertiex: ditampilkan.