JavaSkript fɔ di Baybul

Bring Bootstrap to layf wit wi opshɔnal JavaSkript plɔgin dɛn. Lan bɔt ɛni plɔgin, wi data ɛn programmatik API opshɔn dɛn, ɛn ɔda tin dɛn.

Na dis pej

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, Parcel, Vite...), yu kin yuz /js/dist/*.jsfayl dɛn we dɔn rɛdi fɔ UMD.

Yuz wit JavaSkript fɔm dɛn

Pan ɔl we yu kin yuz di Bootstrap CSS wit ɛni fremwɔk, di Bootstrap JavaSkript nɔ ful-ɔp wit JavaSkript fremwɔk dɛn lɛk Riakt, Vue, ɛn Angular we de tek am se dɛn sabi di DOM ful wan. Ɔl tu di Bootstrap ɛn di fremwɔk kin tray fɔ chenj di sem DOM ɛlimɛnt, we kin mek bɔg dɛn lɛk drɔpdɔwn dɛn we kin stɔp na di “opin” pozishɔn.

Wan bɛtɛ ɔda we fɔ di wan dɛn we de yuz dis kayn fremwɔk na fɔ yuz wan framwɔk-spɛsifi k pakej instead ɔf di Bootstrap JavaSkript. Na sɔm pan di tin dɛn we pipul dɛn lɛk fɔ du:

Riakt: Riakt Bɔtstrap
Vue: BootstrapVue (naw, na Vue 2 ɛn Bootstrap 4 nɔmɔ de sɔpɔt)
Angul: ng-bɔtstrap fɔ di wan dɛn we de

Yuz Bootstrap as wan modul

Tray am yusɛf! Daunlod di sɔs kɔd ɛn wok dɛmo fɔ yuz Bootstrap as ES modul frɔm di twbs/ɛgzampul ripɔsitɔri . Yu kin opin di ɛgzampul bak na StackBlitz .

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 mɔdyul na di brawza, if di brawza 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>

We yu kɔmpia am wit JS bɔndɛl dɛn, fɔ yuz ESM na di brawza, yu nid fɔ yuz di ful pat ɛn fayl nem instead ɔf di mɔdyul nem. Rid mɔ bɔt JS modul dɛn na di brawza. Na dat mek wi de yuz 'bootstrap.esm.min.js'instead fɔ de 'bootstrap'ɔp. Bɔt dis kin kɔmplikt mɔ bikɔs ɔf wi Popper dipɛnsin, we de import Popper insay wi JavaSkript lɛk so:

import * as Popper from "@popperjs/core"

If yu tray dis as-is, yu go si wan mistek na di kɔnsol lɛk dis:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Fɔ fiks dis, yu kin yuz wan importmapfɔ sɔlv di arbitri mɔdyul nem dɛn fɔ kɔmplit di rod dɛn. If yu targeted browsers nɔ de sɔpɔt importmap, yu go nid fɔ yuz di es-module-shims projɛkt. Na so i de wok fɔ Bootstrap ɛn Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

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 .

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

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"instead fɔ data-bs-customClass="beautifier".

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Di wan dɛn we de pik di tin dɛn

Wi de yuz di nativ querySelectorɛn querySelectorAlldi we dɛn fɔ aks DOM ɛlimɛnt dɛn fɔ pefɔmɛns rizin, so yu fɔ yuz valid sɛlɛktɔ dɛn . If yu yuz spɛshal sɛlɛktɔ dɛn lɛk collapse:Example, mek shɔ se yu rɔnawe pan dɛn.

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

const myModal = document.querySelector('#myModal')

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

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

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

If yu want fɔ gɛt wan patikyula plɔgin instans, ɛni plɔgin de sho wan getInstancewe. Fɔ ɛgzampul, fɔ pul wan instans dairekt frɔm wan ɛlimɛnt:

bootstrap.Popover.getInstance(myPopoverEl)

Dis we go kam bak nullif dɛn nɔ bigin wan instans oba di ɛlimɛnt we dɛn aks fɔ.

Ɔda we de fɔ du dat, getOrCreateInstancedɛn kin yuz am fɔ gɛt di instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan if dɛn nɔ bin dɔn initialize am.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

If wan instans nɔ bin initialize, i kin aksept ɛn yuz wan opshɔnal kɔnfigyushɔn ɔbjɛkt as sɛkɔn argumɛnt.

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

Apat frɔm di getInstanceɛn getOrCreateInstancewe dɛn de yuz, ɔl di plɔgin kɔnstrɔkta dɛn kin aksept wan DOM ɛlimɛnt ɔ wan valid CSS sɛlɛktɔ as di fɔs argumɛnt. Plugin elements de fain wit di querySelectormethod since wi plugins onli de sopot wan single element.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

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ɔ du wan akshɔn wans di chenj dɔn, yu kin lisin to di kɔrɛspɔndɛns ivin.

const myCollapseEl = document.querySelector('#myCollapse')

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

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

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`we

Pan ɔl we i go tan lɛk se i kɔrɛkt fɔ yuz di disposewe aw dɛn de du am jɔs afta hide(), i go mek yu nɔ gɛt di rayt tin. Na dis na wan ɛgzampul bɔt aw yu de yuz di prɔblɛm:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

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

Di we aw dɛn de du am ɛn di prɔpati dɛn we dɛn gɛt

Ɛvri Bootstrap plɔgin de sho di we dɛn we de dɔŋ ya ɛn di statik prɔpati dɛn.

We	Tɔk bɔt
`dispose`	Destroy wan element in modal. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
`getInstance`	Statik mɛtɔd we de alaw yu fɔ gɛt di modal instans we gɛt fɔ du wit wan DOM ɛlimɛnt.
`getOrCreateInstance`	Statik we de alaw yu fɔ gɛt di modal instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we i nɔ bin initialize.

Statik prɔpati	Tɔk bɔt
`NAME`	Ritɔn di plɔgin nem. (Ɛgzampul: `bootstrap.Tooltip.NAME`)
`VERSION`	Yu kin akses di vɛshɔn fɔ ɛni wan pan di plɔgin dɛn na Bootstrap bay di `VERSION`prɔpati we di plɔgin in kɔnstrɔkta gɛt (Ɛgzampul: `bootstrap.Tooltip.VERSION`)

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:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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:

const 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
const 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:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

If yu want fɔ yuz jQuery

Yu nɔ nid jQuery na Bootstrap 5 , 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 kin mek yu ebul fɔ du dɛn tin ya:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Na di sem tin kin apin to wi ɔda pat dɛn.

Nɔ kɔnflikt nɔ de

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

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

Bootstrap nɔ ɔfishal wan sɔpɔt tɔd-pati JavaSkript laybri dɛn lɛk Prototype ɔ jQuery UI. Pan ɔl .noConflictwe tin dɛn kin apin ɛn we gɛt nem-spɛs, prɔblɛm dɛn kin de we gɛt fɔ du wit di kɔmpitishɔn we yu nid fɔ fiks fɔ yusɛf.

jKwɛstyɔn dɛn we de apin

Bootstrap go detekt jQuery if jQueryi de na di windowɔbjɛkt ɛn no data-bs-no-jqueryatribyut nɔ de we dɛn dɔn sɛt pan <body>. If dɛn fɛn jQuery, Bootstrap go ɛmit ivintɛns dɛn tank to jQuery in ivin sistɛm. So if yu want fɔ lisin to Bootstrap in ivin dɛn, yu go gɛt fɔ yuz di jQuery mɛtɔd dɛn ( .on, .one) instead ɔf addEventListener.

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

Dɛn dɔn disable JavaSkript

Bootstrap in plɔgin dɛn nɔ gɛt spɛshal fɔl bak we dɛn disable JavaSkript. 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.