JavaScript

Hidupkan Bootstrap dengan plugin JavaScript opsional kami yang dibangun di atas jQuery. Pelajari tentang setiap plugin, data dan opsi API terprogram kami, dan banyak lagi.

Individu atau dikompilasi

Plugin dapat dimasukkan satu per satu (menggunakan Bootstrap's individual js/dist/*.js), atau sekaligus menggunakan bootstrap.jsatau yang diperkecil bootstrap.min.js(jangan sertakan keduanya).

Jika Anda menggunakan bundler (Webpack, Rollup…), Anda dapat menggunakan /js/dist/*.jsfile yang siap UMD.

Ketergantungan

Beberapa plugin dan komponen CSS bergantung pada plugin lain. Jika Anda menyertakan plugin satu per satu, pastikan untuk memeriksa dependensi ini di dokumen. Perhatikan juga bahwa semua plugin bergantung pada jQuery (ini berarti jQuery harus disertakan sebelum file plugin). Konsultasikan dengan kamipackage.json untuk melihat versi jQuery mana yang didukung.

Dropdown, popover , dan tooltips kami juga bergantung pada Popper.js .

Atribut data

Hampir semua plugin Bootstrap dapat diaktifkan dan dikonfigurasi melalui HTML saja dengan atribut data (cara pilihan kami menggunakan fungsionalitas JavaScript). Pastikan untuk hanya menggunakan satu set atribut data pada satu elemen (misalnya, Anda tidak dapat memicu tooltip dan modal dari tombol yang sama.)

Namun, dalam beberapa situasi mungkin diinginkan untuk menonaktifkan fungsi ini. Untuk menonaktifkan API atribut data, lepaskan semua peristiwa pada dokumen yang diberi spasi dengan data-apiseperti:

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

Atau, untuk menargetkan plugin tertentu, cukup sertakan nama plugin sebagai namespace bersama dengan namespace data-api seperti ini:

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

Acara

Bootstrap menyediakan acara khusus untuk sebagian besar tindakan unik plugin. Umumnya, ini datang dalam bentuk infinitive dan past participle - di mana infinitive (ex. show) dipicu pada awal suatu peristiwa, dan bentuk past participle-nya (ex. shown) dipicu pada penyelesaian suatu tindakan.

Semua peristiwa infinitif menyediakan preventDefault()fungsionalitas. Ini memberikan kemampuan untuk menghentikan eksekusi suatu tindakan sebelum dimulai. Mengembalikan false dari event handler juga akan secara otomatis memanggil preventDefault().

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

API terprogram

Kami juga percaya Anda harus dapat menggunakan semua plugin Bootstrap murni melalui JavaScript API. Semua API publik adalah metode tunggal yang dapat dirantai, dan mengembalikan koleksi yang ditindaklanjuti.

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

Semua metode harus menerima objek opsi opsional, string yang menargetkan metode tertentu, atau tidak sama sekali (yang memulai plugin dengan perilaku default):

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

Setiap plugin juga mengekspos konstruktor mentahnya pada Constructorproperti: $.fn.popover.Constructor. Jika Anda ingin mendapatkan instance plugin tertentu, ambil langsung dari elemen: $('[rel="popover"]').data('popover').

Fungsi dan transisi asinkron

Semua metode API terprogram bersifat asinkron dan kembali ke pemanggil setelah transisi dimulai tetapi sebelum berakhir .

Untuk menjalankan tindakan setelah transisi selesai, Anda dapat mendengarkan acara yang sesuai.

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

Selain itu pemanggilan metode pada komponen transisi 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 !!

Pengaturan default

Anda dapat mengubah pengaturan default untuk plugin dengan memodifikasi Constructor.Defaultobjek plugin:

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

Tidak ada konflik

Terkadang perlu menggunakan plugin Bootstrap dengan kerangka kerja UI lainnya. Dalam keadaan ini, tabrakan namespace kadang-kadang dapat terjadi. Jika ini terjadi, Anda dapat memanggil .noConflictplugin 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

Nomor versi

Versi masing-masing plugin jQuery Bootstrap dapat diakses melalui VERSIONproperti konstruktor plugin. Misalnya, untuk plugin tooltip:

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

Tidak ada fallback khusus saat JavaScript dinonaktifkan

Plugin Bootstrap tidak mundur dengan anggun saat JavaScript dinonaktifkan. Jika Anda peduli dengan pengalaman pengguna dalam kasus ini, gunakan <noscript>untuk menjelaskan situasinya (dan cara mengaktifkan kembali JavaScript) kepada pengguna Anda, dan/atau menambahkan fallback khusus Anda sendiri.

Util

Semua file JavaScript Bootstrap bergantung util.jsdan harus disertakan bersama file JavaScript lainnya. Jika Anda menggunakan yang dikompilasi (atau diperkecil) bootstrap.js, tidak perlu menyertakan ini—ini sudah ada di sana.

util.jstermasuk fungsi utilitas dan pembantu dasar untuk transitionEndacara serta emulator transisi CSS. Ini digunakan oleh plugin lain untuk memeriksa dukungan transisi CSS dan untuk menangkap transisi yang menggantung.

pembersih

Tooltips dan Popovers menggunakan pembersih bawaan kami untuk membersihkan opsi yang menerima HTML.

Nilai defaultnya whiteListadalah sebagai 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 menambahkan nilai baru ke default ini, whiteListAnda dapat melakukan hal 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 melewati pembersih kami karena Anda lebih suka menggunakan perpustakaan khusus, misalnya DOMPurify , Anda harus melakukan hal berikut:

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