JavaScript

Hidupkan Bootstrap dengan pemalam JavaScript pilihan kami yang dibina pada jQuery. Ketahui tentang setiap pemalam, data kami dan pilihan API terprogram dan banyak lagi.

Individu atau disusun

Pemalam boleh disertakan secara individu (menggunakan individu Bootstrap js/dist/*.js), atau sekali gus menggunakan bootstrap.jsatau diperkecilkan bootstrap.min.js(jangan sertakan kedua-duanya).

Jika anda menggunakan pengikat (Webpack, Rollup…), anda boleh menggunakan /js/dist/*.jsfail yang sedia UMD.

Kebergantungan

Sesetengah pemalam dan komponen CSS bergantung pada pemalam lain. Jika anda memasukkan pemalam secara individu, pastikan anda menyemak kebergantungan ini dalam dokumen. Juga ambil perhatian bahawa semua pemalam bergantung pada jQuery (ini bermakna jQuery mesti disertakan sebelum fail pemalam). Rujuk kamipackage.json untuk melihat versi jQuery yang disokong.

Menu lungsur turun, popover dan petua alat kami juga bergantung pada Popper.js .

Atribut data

Hampir semua pemalam Bootstrap boleh didayakan dan dikonfigurasikan melalui HTML sahaja dengan atribut data (cara pilihan kami untuk menggunakan fungsi JavaScript). Pastikan anda hanya menggunakan satu set atribut data pada satu elemen (cth, anda tidak boleh mencetuskan petua alat dan modal daripada butang yang sama.)

Walau bagaimanapun, dalam beberapa situasi mungkin wajar untuk melumpuhkan fungsi ini. Untuk melumpuhkan API atribut data, nyahikat semua peristiwa pada ruang nama dokumen dengan data-apiseperti itu:

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

Sebagai alternatif, untuk menyasarkan pemalam tertentu, hanya masukkan nama pemalam sebagai ruang nama bersama-sama ruang nama data-api seperti ini:

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

Peristiwa

Bootstrap menyediakan acara tersuai untuk kebanyakan tindakan unik pemalam. Secara amnya, ini datang dalam bentuk infinitif dan participle lepas - di mana infinitif (cth. show) dicetuskan pada permulaan acara, dan bentuk participle past (cth. shown) dicetuskan apabila selesai tindakan.

Semua peristiwa infinitif menyediakan preventDefault()fungsi. Ini memberikan keupayaan untuk menghentikan pelaksanaan tindakan sebelum ia bermula. Mengembalikan palsu daripada pengendali acara juga akan memanggil secara automatik preventDefault().

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API Programmatik

Kami juga percaya anda sepatutnya boleh menggunakan semua pemalam Bootstrap semata-mata melalui API JavaScript. Semua API awam adalah kaedah tunggal, boleh rantai dan mengembalikan koleksi yang telah diambil tindakan.

$('.btn.danger').button('toggle').addClass('fat')

Semua kaedah harus menerima objek pilihan pilihan, rentetan yang menyasarkan kaedah tertentu, atau tiada apa-apa (yang memulakan pemalam dengan tingkah laku lalai):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Setiap pemalam juga mendedahkan pembina mentahnya pada Constructorharta: $.fn.popover.Constructor. Jika anda ingin mendapatkan contoh pemalam tertentu, dapatkannya terus daripada elemen: $('[rel="popover"]').data('popover').

Fungsi dan peralihan tak segerak

Semua kaedah API terprogram adalah tak segerak dan kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat .

Untuk melaksanakan tindakan setelah peralihan selesai, anda boleh mendengar acara yang sepadan.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Di samping itu panggilan kaedah pada komponen peralihan akan diabaikan .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Tetapan lalai

Anda boleh menukar tetapan lalai untuk pemalam dengan mengubah suai Constructor.Defaultobjek pemalam:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Tiada konflik

Kadangkala perlu menggunakan pemalam Bootstrap dengan rangka kerja UI yang lain. Dalam keadaan ini, perlanggaran ruang nama kadangkala boleh berlaku. Jika ini berlaku, anda boleh menghubungi .noConflictpemalam yang ingin anda kembalikan nilainya.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Nombor versi

Versi setiap pemalam jQuery Bootstrap boleh diakses melalui hak VERSIONmilik pembina pemalam. Sebagai contoh, untuk pemalam petua alat:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

Tiada sandaran khas apabila JavaScript dilumpuhkan

Pemalam Bootstrap tidak akan kembali dengan sangat anggun apabila JavaScript dilumpuhkan. Jika anda mengambil berat tentang pengalaman pengguna dalam kes ini, gunakan <noscript>untuk menerangkan situasi (dan cara mendayakan semula JavaScript) kepada pengguna anda dan/atau menambah sandaran tersuai anda sendiri.

Util

Semua fail JavaScript Bootstrap bergantung pada util.jsdan ia perlu disertakan bersama fail JavaScript yang lain. Jika anda menggunakan compiled (atau miniified) bootstrap.js, tidak perlu memasukkan ini—ia sudah ada.

util.jstermasuk fungsi utiliti dan pembantu asas untuk transitionEndacara serta emulator peralihan CSS. Ia digunakan oleh pemalam lain untuk menyemak sokongan peralihan CSS dan untuk menangkap peralihan tergantung.

Sanitizer

Petua alat dan Popovers menggunakan sanitizer terbina dalam kami untuk membersihkan pilihan yang menerima HTML.

Nilai lalai whiteListadalah seperti berikut:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Jika anda ingin menambah nilai baharu pada lalai ini whiteList, anda boleh melakukan perkara berikut:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Jika anda ingin memintas sanitizer kami kerana anda lebih suka menggunakan perpustakaan khusus, contohnya DOMPuify , anda harus melakukan perkara berikut:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})