JavaScript

Na Bootstrap nagbɔ agbe kple míaƒe JavaScript ƒe kpeɖeŋutɔ siwo míetia. Srɔ̃ nu tso plugin ɖesiaɖe ŋu, míaƒe nyatakakawo kple ɖoɖowɔɖi ƒe API ƒe tiatiawɔblɔɖewo, kple bubuwo ŋu.

Le axa sia dzi

Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (zã Bootstrap ƒe ɖekaɖeka js/dist/*.js), alo wo katã zi ɖeka to zazã bootstrap.jsalo esiwo woɖe ɖe vovo bootstrap.min.js(mègade evea siaa eme o).

Ne èzã bundler (Webpack, Parcel, Vite...), àteŋu azã /js/dist/*.jsfaɛl siwo le klalo na UMD.

Zãzã kple JavaScript ƒe ɖoɖowo

Togbɔ be woateŋu azã Bootstrap CSS kple ɖoɖo ɖesiaɖe hã la, Bootstrap JavaScript mewɔ ɖeka bliboe kple JavaScript ɖoɖowo abe React, Vue, kple Angular siwo tsɔe be DOM ŋuti sidzedze bliboe o. Bootstrap kple framework siaa ateŋu adze agbagba be yewoatrɔ asi le DOM ƒe akpa ɖeka ma ke ŋu, si ana vodadawo abe dropdowns ene siwo tsi “ʋu” ƒe nɔnɔme me la nado mo ɖa.

Mɔnu bubu si nyo wu na amesiwo zãa ɖoɖowɔɖi sia ƒomevi enye be woazã ɖoɖowɔɖi ƒe akpa aɖe koŋ ɖe Bootstrap JavaScript teƒe. Tiatia siwo ame geɖe lɔ̃a zazã wu la dometɔ aɖewoe nye esi:

Wɔ Nu: Wɔ Nu Ðe Ame Ŋu Bootstrap
Vue: BootstrapVue (fifia la, Vue 2 kple Bootstrap 4 koe doa alɔ)
Dzogoedzinu: ng-bootstrap

Bootstrap zazã abe module ene

Wò ŋutɔ te ekpɔ! Wɔ dzɔtsoƒe ƒe nuŋɔŋlɔ kple dɔwɔwɔ ƒe wɔwɔfia na Bootstrap zazã abe ES module ene tso twbs/examples nudzraɖoƒe . Àteŋu aʋu kpɔɖeŋua hã le StackBlitz me.

Míenaa Bootstrap ƒe tɔtrɔ aɖe si wotu abe ESM( bootstrap.esm.jskple bootstrap.esm.min.js) si na nète ŋu zãa Bootstrap abe module ene le web-browser la me, ne wò web-browser siwo nèɖo taɖodzinu na la doa alɔe .

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

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

Ne wotsɔe sɔ kple JS bundlers la, ESM zazã le browser me bia be nàzã mɔ bliboa kple faɛl ŋkɔ ɖe module ŋkɔ teƒe. Xlẽ nu geɖe tso JS modules ŋu le browser la me. Esia tae míezãnɛ 'bootstrap.esm.min.js'ɖe 'bootstrap'etame teƒe ɖo. Ke hã, esia gasẽ ɖe edzi le míaƒe Popper ŋuɖoɖo ɖe eŋu ta, si xɔa Popper ɖe míaƒe JavaScript me abe alea ene:

import * as Popper from "@popperjs/core"

Ne ète esia kpɔ abe alesi wòle ene la, àkpɔ vodada le console la me abe esiawo ene:

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

Be nàɖɔ esia ɖo la, àteŋu azã an importmapatsɔ akpɔ module ŋkɔ siwo nèdi la gbɔ atsɔ awu mɔwo nu. Ne wò web-browser siwo nèɖo taɖodzinu na mewɔa dɔ o importmapla, ahiã be nàzã es-module-shims dɔa. Alesi wòwɔa dɔe na Bootstrap kple Popper enye si:

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

Nusiwo dzi woanɔ te ɖo

Plugin aɖewo kple CSS ƒe akpa aɖewo nɔa te ɖe plugin bubuwo dzi. Ne ède plugins ɖekaɖeka la, kpɔ egbɔ be yelé ŋku ɖe nusiwo dzi woanɔ te ɖo siawo ŋu le docs la me.

Míaƒe dropdowns, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo hã nɔ te ɖe Popper dzi .

Nyatakaka ƒe nɔnɔmewo

Woateŋu awɔ Bootstrap ƒe kpeɖeŋutɔwo katã kloe ŋudɔ eye woaɖo wo ɖe ɖoɖo nu to HTML ɖeɖeko dzi kple nyatakaka ƒe nɔnɔmewo (mɔ si míelɔ̃na wu be míazã JavaScript ƒe dɔwɔwɔ). Kpɔ egbɔ be yezã nyatakaka ƒe nɔnɔmewo ƒe hatsotso ɖeka ko ɖe nu ɖeka dzi (le kpɔɖeŋu me, màte ŋu aʋu dɔwɔnu ƒe aɖaŋuɖoɖo kple modal tso abɔta ɖeka dzi o.)

Esi woateŋu atsɔ tiatiawɔnuwo ato nyatakaka nɔnɔmewo alo JavaScript dzi ta la, àteŋu atsɔ tiatia ŋkɔ akpe ɖe data-bs-, abe alesi wòle le data-bs-animation="{value}". Kpɔ egbɔ be yetrɔ tiatia ŋkɔa ƒe case type tso “ camelCase ” yi “ kebab-case ” ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, zãe data-bs-custom-class="beautifier"ɖe data-bs-customClass="beautifier".

Tso Bootstrap 5.2.0 dzi la, akpaawo katã doa alɔ dodokpɔ ƒe nyatakaka si wodzra ɖo ƒe nɔnɔme data-bs-configsi ateŋu axɔ akpa ƒe ɖoɖo bɔbɔe abe JSON ka ene. Ne element aɖe si data-bs-config='{"delay":0, "title":123}'kple data-bs-title="456"nɔnɔmewo le la, asixɔxɔ mamlɛtɔ titleanye 456eye nyatakaka nɔnɔme vovovoawo axɔ asixɔxɔ siwo wona le data-bs-config. Tsɔ kpe ɖe eŋu la, nyatakaka ƒe nɔnɔme siwo li fifia te ŋu tsɔa JSON ƒe asixɔxɔwo abe data-bs-delay='{"show":0,"hide":150}'.

Tiatiawɔlawo

Míezãa native querySelectorkple querySelectorAllmɔnuwo tsɔ biaa DOM ƒe akpawo le dɔwɔwɔ ƒe susuwo ta, eyata ele be nàzã tiatiawɔla siwo sɔ . Ne èzãa tiatiawɔnu tɔxɛwo abe collapse:Example, ene la, kpɔ egbɔ be yesi le wo nu.

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugins akpa gãtɔ ƒe nuwɔna tɔxɛwo. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple akpaɖekedzimademade ƒe nɔnɔme si va yi me - afisi wodzea nyagbemanɔsitɔ (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpaɖekedzimademade ƒe nɔnɔme si va yi (ex. shown) dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefault()dɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme. Ne ètrɔ alakpa tso nudzɔdzɔwo gbɔ kpɔla me la, ayɔ hã le eɖokui si preventDefault().

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

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

Ðoɖowɔɖi ƒe API

Xɔtulawo katã xɔa tiatiawɔblɔɖe ƒe nu alo naneke o (si dzea kpeɖeŋutɔ gɔme kple eƒe nuwɔna gbãtɔ):

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

Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, plugin ɖesiaɖe ɖea getInstancemɔnu aɖe ɖe go. Le kpɔɖeŋu me, be nàxɔ kpɔɖeŋu aɖe tẽ tso element aɖe me:

bootstrap.Popover.getInstance(myPopoverEl)

Mɔnu sia atrɔ nullne womedze kpɔɖeŋu aɖe gɔme ɖe nusi wobia la dzi o.

Alo, getOrCreateInstancewoateŋu azãe atsɔ axɔ kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe, alo awɔ yeye nenye be womedze egɔme o.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Nenye be womedze kpɔɖeŋu aɖe gɔme o la, ateŋu alɔ̃ eye wòazã ɖoɖowɔɖi ƒe nu si woateŋu awɔ abe nyaʋiʋli evelia ene.

CSS tiatiawɔlawo le xɔtulawo me

Tsɔ kpe ɖe getInstancekple getOrCreateInstancemɔnuwo ŋu la, plugin xɔtulawo katã ateŋu axɔ DOM ƒe akpa alo CSS tiatiawɔla si sɔ abe nyaʋiʋli gbãtɔ ene. Wokpɔa plugin elements kple querySelectormɔnu elabena míaƒe plugins doa alɔ element ɖeka ko.

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

Dɔwɔwɔ siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

Programmatic API mɔnuwo katã nye asynchronous eye wotrɔna yia yɔla gbɔ ne wonya dze tɔtrɔa gɔme ko, gake hafi wòwu enu . Be nàte ŋu awɔ nuwɔna aɖe ne tɔtrɔa wu enu ko la, àte ŋu ase nudzɔdzɔ si sɔ kplii.

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

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

Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

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`nuwɔmɔnu

Togbɔ be adze abe esɔ be woazã disposemɔnua le , megbe teti hide()hã la, ana nusiwo mesɔ o nado tso eme. Kuxia zazã ƒe kpɔɖeŋu aɖee nye esi:

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

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

Ðoɖo siwo woɖo ɖi xoxo

Àteŋu atrɔ ɖoɖo siwo woɖo ɖi na plugin to asitɔtrɔ le plugin ƒe Constructor.Defaultnu ŋu:

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

Mɔnuwo kple nɔnɔmewo

Bootstrap ƒe kpeɖeŋutɔ ɖesiaɖe ɖea mɔnu siwo gbɔna kple static nɔnɔmewo ɖe go.

Nuwɔmɔnu	Nuɖᴐɖᴐ
`dispose`	Egblẽa nu le element aɖe ƒe modal ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)
`getInstance`	Static mɔnu si ɖea mɔ na wò be nàxɔ modal instance si do ƒome kple DOM element aɖe.
`getOrCreateInstance`	Static mɔnu si ɖea mɔ na wò be nàxɔ modal instance si do ƒome kple DOM element, alo awɔ yeye nenye be womedze egɔme o.

Static ƒe nɔnɔme	Nuɖᴐɖᴐ
`NAME`	Trɔ plugin ƒe ŋkɔa. (Kpɔɖeŋu: `bootstrap.Tooltip.NAME`)
`VERSION`	Woateŋu akpɔ Bootstrap ƒe kpeɖeŋutɔ ɖesiaɖe ƒe tɔtrɔ to `VERSION`kpeɖeŋutɔ ƒe xɔtula ƒe nɔnɔme dzi (Kpɔɖeŋu: `bootstrap.Tooltip.VERSION`) .

Atike si wotsɔna klɔa nu ŋu

Dɔwɔnu ƒe aɖaŋuɖoɖowo kple Popovers zãa míaƒe dzadzɛnyenye si wotu ɖe eme tsɔ kɔa tiatia siwo xɔa HTML la ŋu.

Asixɔxɔ si woɖo ɖi allowListlae nye esiawo:

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

Ne èdi be yeatsɔ asixɔxɔ yeyewo akpe ɖe default sia ŋu la allowList, àteŋu awɔ nusiwo gbɔna:

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)

Ne èdi be yeato míaƒe dzadzɛnyenyemɔ̃a ŋu le esi nèdi be yeazã agbalẽdzraɖoƒe si woɖo ɖi koŋ ta, le kpɔɖeŋu me DOMPurify , ele be nàwɔ nu siwo gbɔna:

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

Ne èdi la, zã jQuery

Mèhiã jQuery le Bootstrap 5 me o, gake egate ŋu adzɔ kokoko be nàzã míaƒe akpawo kple jQuery. Ne Bootstrap de dzesi jQueryle windownu la me la, atsɔ míaƒe akpawo katã akpe ɖe jQuery ƒe plugin ɖoɖoa ŋu. Esia wɔnɛ be nàte ŋu awɔ nu siwo gbɔna:

$('[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

Nenema kee wòle le míaƒe akpa bubuawo hã gome.

Masɔmasɔ aɖeke meli o

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

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

Bootstrap medoa alɔ ame etɔ̃lia ƒe JavaScript agbalẽdzraɖoƒewo abe Prototype alo jQuery UI ene le se nu o. Togbɔ be .noConflictnudzɔdzɔwo li eye wotsɔ ŋkɔwo ɖo wo dome hã la, kuxi siwo sɔ kple wo nɔewo ate ŋu anɔ anyi siwo wòle be nàɖɔ ɖo le ɖokuiwò si.

jQuery ƒe nudzɔdzɔwo

Bootstrap akpɔ jQuery ne jQueryele windownu la me eye nɔnɔme aɖeke data-bs-no-jquerymeɖo ɖe <body>. Ne wokpɔ jQuery la, Bootstrap aɖe nudzɔdzɔwo ɖa le jQuery ƒe nudzɔdzɔwo ƒe ɖoɖoa ta. Eyata ne èdi be yease Bootstrap ƒe nudzɔdzɔwo la, ahiã be nàzã jQuery mɔnuwo ( .on, .one) ɖe addEventListener.

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

Wotu JavaScript la nu ƒu

Bootstrap ƒe plugins mekpɔa fallback tɔxɛ aɖeke ne wotu JavaScript o. Ne ètsɔ ɖe le zãla ƒe nuteƒekpɔkpɔ me le go sia me la, zã <noscript>nàtsɔ aɖe nɔnɔmea me (kple alesi nàgbugbɔ JavaScript awɔ dɔe) me na wò zãlawo, kple/alo nàtsɔ wò ŋutɔ wò fallback siwo nèwɔ la akpe ɖe eŋu.