Gambaran keseluruhan pemalam Bootstrap


Komponen yang dibincangkan dalam bab Komponen Reka Letak sebelum ini hanyalah permulaan. Bootstrap dilengkapi dengan 12 pemalam jQuery, yang memanjangkan fungsi dan menambah lebih interaktiviti pada tapak. Walaupun anda bukan pembangun JavaScript lanjutan, anda boleh mula mempelajari pemalam JavaScript Bootstrap. Menggunakan API Data Bootstrap, kebanyakan pemalam boleh dicetuskan tanpa menulis sebarang kod.

Terdapat dua cara untuk tapak merujuk pemalam Bootstrap:

  • Rujukan berasingan: Gunakan individu Bootstrap *. js Fail. Sesetengah pemalam dan komponen CSS bergantung pada pemalam lain. Jika anda merujuk pemalam secara individu, pastikan anda memahami kebergantungan antara pemalam tersebut terlebih dahulu.

    Susun (dan serentak) rujukan : gunakan bootstrap.js atau versi minified bootstrap.min.js.

    Jangan cuba merujuk kedua-dua fail pada masa yang sama, kerana kedua-dua bootstrap.js dan bootstrap.min.js mengandungi semua pemalam.
Semua pemalam bergantung pada jQuery. Jadi jQuery mesti dipetik sebelum fail pemalam. Sila lawati bower.json untuk melihat versi jQuery yang kini disokong oleh Bootstrap.

atribut data

  • Anda boleh menggunakan semua pemalam Bootstrap hanya melalui API atribut data tanpa menulis satu baris kod JavaScript. Ini ialah API kelas pertama dalam Bootstrap dan harus menjadi pilihan pertama anda.

  • Sekali lagi, mungkin terdapat situasi di mana ciri ini perlu dimatikan. Oleh itu, kami juga menyediakan cara untuk mematikan API atribut data, iaitu, untuk menyahsekat peristiwa yang terikat pada dokumen dengan ruang nama data-api. Seperti yang berikut:

$(document).off('.data-api')

  • seperti Untuk menutup pemalam tertentu, anda hanya perlu menambah nama pemalam sebagai ruang nama sebelum ruang nama data-api, seperti yang ditunjukkan di bawah:

$ (document ).off('.alert.data-api')

Programmatic API

Kami menyediakan API JavaScript tulen untuk semua pemalam Bootstrap. Semua API awam menyokong kaedah panggilan individu atau rantaian, dan mengembalikan koleksi elemen yang mereka kendalikan (nota: borang panggilan adalah konsisten dengan jQuery). Contohnya:

$(".btn.bahaya").butang("togol").addClass("lemak")

Semua kaedah boleh menerima objek pilihan pilihan sebagai parameter, atau rentetan yang mewakili kaedah tertentu, atau tanpa sebarang parameter (dalam kes ini, pemalam akan dimulakan kepada kelakuan lalai), seperti ditunjukkan di bawah ：

// Inisialisasi kepada tingkah laku lalai
$ ("#mymodal"). Modal ()
// diasaskan untuk tidak menyokong papan kekunci .modal ({keyboard: false})
// Mulakan dan panggil segera tunjukkan
$("#myModal").modal('show')
Setiap pemalam ada dalam < Atribut 🎜>Pembina

turut mendedahkan asalnya pembina: $.fn.popover.Constructor. Jika anda ingin mendapatkan contoh pemalam tertentu, anda boleh mendapatkannya terus melalui elemen halaman:

$('[rel=popover]').data('popover') .
Elakkan konflik ruang nama

Kadangkala pemalam Bootstrap mungkin perlu digunakan dengan rangka kerja UI yang lain. Dalam kes ini, konflik ruang nama mungkin berlaku. Jika ini malangnya berlaku, anda boleh memulihkan nilai asalnya dengan memanggil kaedah

.noConflict

pemalam.

// Kembalikan nilai yang diberikan sebelum $.fn.button
var bootstrapButton = $.fn.button.noConflict()
// Berikan Bootstrap kepada $().bootstrapBtn Functions . Secara umumnya, peristiwa ini terdapat dalam dua bentuk:


Kata kerja infinitif

: Ini dicetuskan pada permulaan acara. Contohnya

cth: tunjukkan

. Peristiwa infinitif menyediakan fungsi

preventDefault
    . Ini memungkinkan untuk menghentikan pelaksanaan operasi sebelum acara bermula.

  • $('#myModal').on('show.bs.modal', fungsi (e) {// Halang paparan kotak modal jika (!data) kembali e.preventDefault() })


Borang participle lalu
: Ini akan berlaku selepas tindakan dilaksanakan dicetuskan. Contohnya
cth: ditunjukkan
.