JavaSkript fɔ di Baybul

Wan wan ɔ we dɛn dɔn kɔmpilayt

Plɔgin dɛn kin inklud wan wan (yuz Bootstrap in wan wan js/dist/*.js), ɔ ɔl wan tɛm yuz bootstrap.jsɔ di minified bootstrap.min.js(nɔ inklud ɔl tu).

If yu yuz bundler (Webpack, Rollup...), yu kin yuz /js/dist/*.jsfayl dɛn we dɔn rɛdi fɔ UMD.

Yuz Bootstrap as wan modul

Wi de gi yu wan vɛshɔn fɔ Bootstrap we dɛn bil as ESM( bootstrap.esm.jsɛn bootstrap.esm.min.js) we de alaw yu fɔ yuz Bootstrap as modul na yu brɔwza, if yu brɔwza dɛn we yu dɔn tɔk bɔt de sɔpɔt am .

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

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

Dipɛnsin dɛn

Sɔm plɔgin dɛn ɛn CSS kɔmpɔnɛnt dɛn de dipen pan ɔda plɔgin dɛn. If yu put plɔgin dɛn wan bay wan, mek shɔ se yu chɛk fɔ dɛn dipɛnsin dɛn ya na di dɔkyumɛnt dɛn.

Wi dropdowns, popovers ɛn tultips dɛn bak de dipen pan Popper .

Yu stil want fɔ yuz jQuery? I pɔsibul!

Bootstrap 5 na fɔ yuz witout jQuery, bɔt i stil pɔsibul fɔ yuz wi kɔmpɔnɛnt dɛn wit jQuery. If Bootstrap detekt jQueryinsay di windowɔbjɛkt i go ad ɔl wi kɔmpɔnɛnt dɛn na jQuery in plɔgin sistem; dis min se yu go ebul fɔ du $('[data-bs-toggle="tooltip"]').tooltip()fɔ ɛnabul tultip dɛn. Na di sem tin kin apin to wi ɔda pat dɛn.

Data atribyut dɛn

Klose to ɔl di Bootstrap plɔgin dɛn kin ɛnabul ɛn kɔnfigyut tru HTML nɔmɔ wit data atribyut dɛn (wi we wi lɛk fɔ yuz JavaSkript funkshɔnaliti). Mek shɔ se yu jɔs yuz wan sɛt fɔ data atribyut dɛn pan wan ɛlimɛnt (ɛgz., yu nɔ go ebul fɔ trig wan tultip ɛn modal frɔm di sem bɔtin.)

Di tin dɛn we kin apin

Bootstrap de gi kɔstɔm ivin fɔ bɔku pan di plɔgin dɛn yunik akshɔn dɛn. Jɛnɛral wan, dɛn wan ya kin kam insay wan infinitiv ɛn past patisipul fɔm - usay di infinitiv (ɛks. show) kin trig we wan ivin bigin, ɛn in past patisipul fɔm (ɛks. shown) kin trig we wan akshɔn dɔn.

Ɔl di infinitiv ivin dɛn de gi preventDefault()funkshɔnaliti. Dis de gi di abiliti fɔ stɔp di ɛgzikishɔn fɔ wan akshɔn bifo i bigin. Ritɔn false frɔm wan ivent handla go kɔl bak ɔtomɛtik wan 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...
})

Programmetik API fɔ di wan dɛn we de wok

Ɔl di kɔnstrɔkta dɛn kin aksept wan opshɔnal opshɔn ɔbjɛkt ɔ natin (we de bigin wan plɔgin wit in difɔlt bihayvya):

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

If yu want fɔ gɛt wan patikyula plɔgin instans, ɛni plɔgin de sho wan getInstancewe. Fɔ mek yu ebul fɔ pul am dairekt frɔm wan ɛlimɛnt, du dis: bootstrap.Popover.getInstance(myPopoverEl).

CSS sɛlɛktɔ dɛn na kɔnstrɔkta dɛn

Yu kin yuz CSS sɛlɛktɔ bak as di fɔs argumɛnt instead ɔf wan DOM ɛlimɛnt fɔ initialize di plɔgin. Naw di elemɛnt fɔ di plɔgin de fɛn bay di querySelectorwe bikɔs wi plɔgin dɛn de sɔpɔt wan ɛlimɛnt nɔmɔ.

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

Asynchronous fכnshכn dεm εn transishכn dεm

Ɔl di programmatik API mɛtɔd dɛn na asynchronous ɛn dɛn kin kam bak to di pɔsin we kɔl wans di transishɔn dɔn stat bɔt bifo i dɔn .

Fɔ mek yu ebul fɔ ɛksɛkutiv wan akshɔn wans di chenj dɔn, yu kin lisin to di kɔrɛspɔndɛns ivin.

var myCollapseEl = document.getElementById('myCollapse')

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

Apat frɔm dat wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt go ignore .

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 !!

Difɔlt sɛtin dɛn

Yu kin chenj di difɔlt sɛtin fɔ wan plɔgin bay we yu chenj di tin we di plɔgin de Constructor.Defaultyuz:

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

Nɔ kɔnflikt (na if yu yuz jQuery nɔmɔ)

Sɔntɛnde i nid fɔ yuz Bootstrap plɔgin dɛn wit ɔda UI fremwɔk dɛn. Insay dɛn kayn tin ya, nemspɛs kɔlishin kin apin wan wan tɛm. If dis apin, yu kin kɔl .noConflictdi plɔgin we yu want fɔ gi bak di valyu fɔ.

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

Vɛshɔn nɔmba dɛn

Di vɛshɔn fɔ ɛni wan pan di plɔgin dɛn we Bootstrap gɛt, yu kin akses am bay di VERSIONprɔpati we di plɔgin in kɔnstrɔkta gɛt. Fɔ ɛgzampul, fɔ di tultip plɔgin:

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

Nɔ spɛshal fɔl bak we dɛn nɔ yuz JavaSkript

Bootstrap in plɔgin dɛn nɔ de fɔdɔm bak patikyula grasful wan we JavaSkript nɔ de wok. If yu bisin bɔt di yuza ɛkspiriɛns na dis kes, yuz <noscript>fɔ ɛksplen di sityueshɔn (ɛn aw fɔ ri-ɛnabul JavaSkript) to yu yuza dɛn, ɛn/ɔ ad yu yon kɔstɔm fɔlbak dɛn.

Sanitiza we dɛn kin yuz fɔ was

Tultip ɛn Popovers de yuz wi bilt-in sanitiza fɔ sanitayz opshɔn dɛn we de aksept HTML.

Di difɔlt allowListvalyu na di wan we de dɔŋ ya:

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

If yu want fɔ ad nyu valyu dɛn to dis difɔlt allowListyu kin du dɛn tin ya:

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)

If yu want fɔ baypas wi sanitiza bikɔs yu lɛk fɔ yuz laybri we dɛn dɔn gi yu, fɔ ɛgzampul DOMPurify , yu fɔ du dɛn tin ya:

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