JavaScript

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.

Menggunakan Bootstrap sebagai modul

Kami menyediakan versi Bootstrap yang dibangun sebagai ESM( bootstrap.esm.jsdan bootstrap.esm.min.js) yang memungkinkan Anda untuk menggunakan Bootstrap sebagai modul di browser Anda, jika browser target Anda mendukungnya .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Ketergantungan

Beberapa plugin dan komponen CSS bergantung pada plugin lain. Jika Anda menyertakan plugin satu per satu, pastikan untuk memeriksa dependensi ini di dokumen.

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

Masih ingin menggunakan jQuery? Itu mungkin!

Bootstrap 5 dirancang untuk digunakan tanpa jQuery, tetapi masih memungkinkan untuk menggunakan komponen kami dengan jQuery. Jika Bootstrap mendeteksi jQuerydi windowobjek , itu akan menambahkan semua komponen kami di sistem plugin jQuery; ini berarti Anda dapat melakukan $('[data-bs-toggle="tooltip"]').tooltip()untuk mengaktifkan tooltips. Hal yang sama berlaku untuk komponen kami yang lain.

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

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

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API terprogram

Semua konstruktor menerima objek opsi opsional atau tidak sama sekali (yang memulai plugin dengan perilaku defaultnya):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Jika Anda ingin mendapatkan instance plugin tertentu, setiap plugin menampilkan getInstancemetode. Untuk mengambilnya langsung dari elemen, lakukan ini: bootstrap.Popover.getInstance(myPopoverEl).

Pemilih CSS di konstruktor

Anda juga dapat menggunakan pemilih CSS sebagai argumen pertama alih-alih elemen DOM untuk menginisialisasi plugin. Saat ini elemen untuk plugin ditemukan dengan querySelectormetode karena plugin kami hanya mendukung satu elemen.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Selain itu pemanggilan metode pada komponen transisi akan diabaikan .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

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

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

Tidak ada konflik (hanya jika Anda menggunakan jQuery)

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 Bootstrap dapat diakses melalui VERSIONproperti konstruktor plugin. Misalnya, untuk plugin tooltip:

bootstrap.Tooltip.VERSION // => "5.1.3"

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.

pembersih

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

Nilai defaultnya allowListadalah sebagai berikut:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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, allowListAnda dapat melakukan hal berikut:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Jika Anda ingin melewati pembersih kami karena Anda lebih suka menggunakan perpustakaan khusus, misalnya DOMPurify , Anda harus melakukan hal berikut:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})