JavaScript

Individu utawa kompilasi

Plugins bisa dilebokake kanthi individu (nggunakake Bootstrap individu js/dist/*.js), utawa kabeh bebarengan nggunakake bootstrap.jsutawa minified bootstrap.min.js(ora kalebu loro-lorone).

Yen sampeyan nggunakake bundler (Webpack, Rollup…), sampeyan bisa nggunakake /js/dist/*.jsfile sing siap UMD.

Nggunakake Bootstrap minangka modul

Kita nyedhiyakake versi Bootstrap sing dibangun minangka ESM( bootstrap.esm.jslan bootstrap.esm.min.js) sing ngidini sampeyan nggunakake Bootstrap minangka modul ing browser sampeyan, yen browser sing ditargetake ndhukung .

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

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

Ketergantungan

Sawetara plugin lan komponen CSS gumantung ing plugin liyane. Yen sampeyan nyakup plugin siji-sijine, priksa manawa sampeyan mriksa dependensi kasebut ing dokumen kasebut.

dropdowns, popovers lan tooltips kita uga gumantung ing Popper .

Isih pengin nggunakake jQuery? Iku bisa!

Bootstrap 5 dirancang kanggo digunakake tanpa jQuery, nanging isih bisa nggunakake komponen kita karo jQuery. Yen Bootstrap ndeteksi obyekjQuerywindow kasebut bakal nambah kabeh komponen ing sistem plugin jQuery ; iki tegese sampeyan bakal bisa nindakake $('[data-bs-toggle="tooltip"]').tooltip()kanggo ngaktifake tooltips. Padha dadi kanggo komponen kita liyane.

Atribut data

Saklawasé kabeh plugin Bootstrap bisa diaktifake lan dikonfigurasi liwat HTML kanthi atribut data (cara sing disenengi kanggo nggunakake fungsi JavaScript). Priksa manawa sampeyan mung nggunakake siji set atribut data ing siji unsur (contone, sampeyan ora bisa micu tooltip lan modal saka tombol sing padha.)

Acara

Bootstrap nyedhiyakake acara khusus kanggo umume tumindak unik plugin. Umumé, iki teka ing wangun infinitive lan past participle - ngendi infinitive (ex. show) dipicu ing wiwitan acara, lan past participle wangun (ex. shown) dipicu nalika completion saka tumindak.

Kabeh acara infinitive nyedhiyakake preventDefault()fungsi. Iki menehi kemampuan kanggo mungkasi eksekusi tumindak sadurunge diwiwiti. Mbalik palsu saka panangan acara uga bakal nelpon kanthi otomatis 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...
})

Programmatic API

Kabeh konstruktor nampa obyek opsional utawa ora ana apa-apa (sing miwiti plugin kanthi prilaku standar):

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

Yen sampeyan pengin njaluk conto plugin tartamtu, saben plugin mbukak getInstancecara. Kanggo njupuk langsung saka unsur, tindakake iki: bootstrap.Popover.getInstance(myPopoverEl).

Pamilih CSS ing konstruktor

Sampeyan uga bisa nggunakake pamilih CSS minangka argumen pisanan tinimbang unsur DOM kanggo miwiti plugin. Saiki unsur kanggo plugin ditemokake kanthi querySelectorcara amarga plugin kita mung ndhukung siji unsur.

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

Fungsi lan transisi asinkron

Kabeh cara API terprogram ora sinkron lan bali menyang panelpon yen transisi diwiwiti nanging sadurunge rampung .

Kanggo nglakokake tumindak sawise transisi rampung, sampeyan bisa ngrungokake acara sing cocog.

var myCollapseEl = document.getElementById('myCollapse')

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

Kajaba iku, telpon metode ing komponen transisi bakal 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 !!

Setelan gawan

Sampeyan bisa ngganti setelan gawan kanggo plugin kanthi ngowahi Constructor.Defaultobyek plugin:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Ora ana konflik (mung yen sampeyan nggunakake jQuery)

Kadhangkala perlu nggunakake plugin Bootstrap karo kerangka UI liyane. Ing kahanan kasebut, tabrakan spasi jeneng kadhangkala bisa kedadeyan. Yen kedadeyan kasebut, sampeyan bisa nelpon .noConflictplugin sing pengin dibalekake regane.

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

Nomer versi

Versi saben plugin Bootstrap bisa diakses liwat VERSIONproperti konstruktor plugin kasebut. Contone, kanggo plugin tooltip:

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

Ora ana fallbacks khusus nalika JavaScript dipateni

Plugin Bootstrap ora mundur kanthi apik nalika JavaScript dipateni. Yen sampeyan peduli karo pengalaman pangguna ing kasus iki, gunakake <noscript>kanggo nerangake kahanan kasebut (lan carane ngaktifake JavaScript maneh) menyang pangguna, lan / utawa nambah fallbacks khusus sampeyan dhewe.

Sanitizer

Tooltips lan Popovers nggunakake sanitizer sing dibangun kanggo ngresiki opsi sing nampa HTML.

Nilai standar allowListyaiku ing ngisor iki:

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: []
}

Yen sampeyan pengin nambah nilai anyar menyang standar iki, allowListsampeyan bisa nindakake ing ngisor iki:

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)

Yen sampeyan pengin ngliwati sanitizer amarga luwih seneng nggunakake perpustakaan khusus, contone DOMPurify , sampeyan kudu nindakake ing ngisor iki:

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