Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

JavaScript ye

Aw ye Bootstrap lase ɲɛnamaya ma ni an ka JavaScript plugins ye minnu bɛ se ka sugandi. Aw ye kunnafoni sɔrɔ plugin kelen-kelen bɛɛ kan, an ka data ani porogaramu API suganditaw kan, ani fɛn wɛrɛw.

Nin ɲɛ in kan

Mɔgɔ kelen-kelen walima a lajɛlen

Plugins bɛ se ka don u kelen-kelen na (ka baara kɛ ni Bootstrap ka kelen-kelen ye js/dist/*.js), walima u bɛɛ bɛ se ka don a kɔnɔ siɲɛ kelen ka baara kɛ ni bootstrap.jswalima ka dɔgɔya bootstrap.min.js(i kana u fila bɛɛ don a kɔnɔ).

N’i ​​bɛ baara Kɛ ni bundler (Webpack, Parcel, Vite...) ye, i bɛ Se ka baara Kɛ ni /js/dist/*.jsfilew ye minnu labɛnnen dòn UMD fɛ.

Baara kɛli ni JavaScript karamɔgɔya ye

Hali ni Bootstrap CSS bɛ Se ka baara Kɛ ni karamɔgɔya suguya bɛɛ ye, Bootstrap JavaScript tɛ Bɛn kosɛbɛ ni JavaScript karamɔgɔya ye i n’a fɔ React, Vue, ani Angular minnu bɛ DOM dɔnniya dafalen ta. Bootstrap ni framework fila bɛɛ bɛ Se k’a ɲini ka DOM yɔrɔ kelen in Yɛlɛma, o bɛ Nà ni buguw ye i n’a fɔ 'daɲɛw minnu bɛ Dòn “da wulilen” yɔrɔ la.

Minnu bɛ baara Kɛ ni nin karamɔgɔ sugu in ye, olu ka fɛɛrɛ ɲuman ye ka baara Kɛ ni karamɔgɔya kɛrɛnkɛrɛnnen foroko ye Bootstrap JavaScript nɔ na . Sugandili minnu ka di kosɛbɛ, olu dɔw filɛ nin ye:

Baara kɛ ni Bootstrap ye i n’a fɔ modulu

Aw yɛrɛ k’a lajɛ! telesarse source code ani baarakɛcogo demo walasa ka Bootstrap baara i n' a fɔ ES module ka bɔ twbs/examples marayɔrɔ la . aw bɛ se fana ka misali da wuli StackBlitz kɔnɔ .

An bɛ Bootstrap bɔko dɔ Di min jɔra i n’a fɔ ESM( bootstrap.esm.jsani bootstrap.esm.min.js) min b’a To i bɛ Se ka Bootstrap Kɛ i n’a fɔ modulu navigatɔrɔ kɔnɔ, n’i ka navigatɔrɔ laɲinitaw b’a Dɛmɛ .

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

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

Ni i y’a suma ni JS bundlers ye, baara kɛli ni ESM ye navigatɛri kɔnɔ, o b’a ɲini i fɛ i ka baara kɛ ni sira dafalen ni dosiye tɔgɔ ye modulu tɔgɔ nɔ na. Aw ye kunnafoni wɛrɛw kalan JS modulew kan navigatɛri kɔnɔ. O de y'a To an bɛ baara Kɛ ni 'bootstrap.esm.min.js'sanfɛla 'bootstrap'ye. Nka, o bɛ gɛlɛya ka taa a fɛ an ka Popper dependency fɛ, min bɛ Popper don an ka JavaScript kɔnɔ i n’a fɔ:

import * as Popper from "@popperjs/core"

N'i y'o Kɛ i n'a fɔ a bɛ cogo min na, i bɛ fili dɔ Ye konsolɛ la i n'a fɔ ninnu:

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

Walasa k’o Labɛn, i bɛ Se ka baara Kɛ ni an ye importmapwalasa ka modulu tɔgɔw ɲɛnabɔ ka siraw Dafa. Ni i ka navigatɔrɔw laɲinitaw tɛ dɛmɛ don importmap, i bɛna baara kɛ ni es-module-shims porozɛ ye. A bɛ baara kɛ cogo min na Bootstrap ni Popper kan, o filɛ nin ye:

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

Dependencies (Jɛkuluw).

Plugin dɔw ni CSS yɔrɔ dɔw bɛ bɔ plugins wɛrɛw de la. N’i ​​ye plugins (dakunw) Dòn u kelen-kelen na, i k’i jija k’o dependencies (daɲɛw) ninnu Lajɛ docs (docs) kɔnɔ.

An ka dropdowns, popovers, ani baarakɛminɛnw fana bɛ bɔ Popper de la .

Donanw ka fɛnw

Bootstrap 'kɔnɔfɛnw bɛɛ bɛ Se ka Dabɔ ani k'u Labɛn HTML dɔrɔn fɛ ni data attributes (an ka JavaScript baarakɛcogo ɲuman ye). Aw ye aw jija ka baara kɛ ni kunnafoni-falen-falen-yɔrɔ kelen dɔrɔn ye fɛn kelen kan (misali la, aw tɛ se ka baarakɛminɛnw ni modɛli dɔ daminɛ ka bɔ butɔni kelen na.)

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Sugandilikɛlaw

An bɛ baara kɛ ni native querySelectorani querySelectorAllfɛɛrɛw ye walasa ka DOM fɛnw ɲininka baarakɛcogo kunw na, o la aw ka kan ka baara kɛ ni sugandilikɛlaw ye minnu bɛ se ka baara kɛ . Ni aw bɛ baara kɛ ni sugandilikɛlan kɛrɛnkɛrɛnnenw ye i n’a fɔ collapse:Example, aw ye aw jija ka boli u ɲɛ.

Ko minnu kɛra

Bootstrap bɛ ko kɛlenw di minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, ka ɲɛsin plugins fanba ka wale kɛrɛnkɛrɛnnenw ma. A ka c’a la, ninnu bɛ Nà daɲɛ-dafalen ni daɲɛ tɛmɛnen cogo la - daɲɛ-dafalen (ex. show) bɛ Daminɛ yɔrɔ min na ko dɔ daminɛ na, wa a daɲɛ tɛmɛnen cogoya (ex. shown) bɛ Daminɛ wale dɔ dafalen na.

Ko minnu tɛ dantigɛ, olu bɛɛ bɛ preventDefault()baarakɛcogo Di. O bɛ se di ka wale dɔ waleyali jɔ sani a ka daminɛ. nkalon seginni ka bɔ ko kɛlenw ɲɛnabɔbaga dɔ la , o fana bɛna wele a yɛrɛma preventDefault().

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

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

API porogaramulen

Constructeurs bɛɛ bɛ sɔn options options object ma walima foyi tɛ (min bɛ plugin dɔ daminɛ n’a kɛcogo kɔrɔ ye):

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

N'i b'a fɛ ka plugin instance kɛrɛnkɛrɛnnen dɔ Sɔrɔ, plugin kelen-kelen bɛɛ bɛ getInstancefɛɛrɛ dɔ Bɔ kɛnɛ kan. Misali la, ka misali dɔ Sɔrɔ k’a ɲɛsin fɛn dɔ ma:

bootstrap.Popover.getInstance(myPopoverEl)

O fɛɛrɛ bɛ segin nullni misali dɔ ma daminɛ fɛn ɲininen kan.

O cogo kelen na, a getOrCreateInstancebɛ se ka kɛ ka misali sɔrɔ min bɛ tali kɛ DOM yɔrɔ dɔ la, walima ka kura da n’a sɔrɔla a ma daminɛ.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Ni misali dɔ ma daminɛ, a bɛ se ka sɔn ani ka baara kɛ ni labɛnfɛn dɔ ye min bɛ se ka sugandi i n’a fɔ dalilu filanan.

CSS sugandilikɛlaw bɛ dilanbagaw kɔnɔ

Ka fara getInstanceani getOrCreateInstancefɛɛrɛw kan, plugin dilannikɛlaw bɛɛ bɛ se ka sɔn DOM yɔrɔ dɔ ma walima CSS sugandilikɛlan nafama dɔ ma i n’a fɔ dalilu fɔlɔ. Plugin elements bɛ Sɔrɔ ni querySelectorfɛɛrɛ ye bari an ka plugins bɛ element kelen dɔrɔn de Dɛmɛ.

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

Baarakɛcogo minnu tɛ kelen ye ani fɛn caman tigɛli

Porogaramu API fɛɛrɛw bɛɛ ye asynchrone ye wa u bɛ segin welebaga ma ni tɛmɛsira daminɛna, nka sanni a ka ban . Walasa ka wale dɔ Kɛ ni 'tɛmɛsira Banna, i bɛ Se ka ko kɛlen min bɛ Bɛn o ma, i bɛ Se k'o Lamɛ.

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

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

Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

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

disposekɛcogo

Hali ni a bɛ se ka kɛ ko a bɛnnen don ka baara kɛ ni o disposefɛɛrɛ ye o yɔrɔnin bɛɛ hide(), o bɛna kɛ sababu ye ka jateminɛ kɛcogo jugu sɔrɔ. Gɛlɛya baarakɛcogo misali dɔ filɛ nin ye:

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

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

Settings (Labɛnw) minnu bɛ daminɛ

Aw bɛ se ka fɛn dɔ labɛncogo kɔrɔw Changer ni aw ye fɛn dɔ sɛmɛntiya Constructor.Default:

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

Fɛɛrɛw ni u nafaw

Bootstrap plugin bɛɛ bɛ nin fɛɛrɛw ni static properties ninnu jira kɛnɛ kan.

Kɛcogo Cogojirali
dispose A bɛ element dɔ ka modal tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Static method min b’a to i bɛ se ka modal instance sɔrɔ min bɛ tali kɛ DOM element dɔ la.
getOrCreateInstance Fɛɛrɛ jɔlen min b’a To i bɛ se ka modal instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma daminɛ.
Propriété statique Cogojirali
NAME A bɛ segin plugin tɔgɔ kan. (Misali la: bootstrap.Tooltip.NAME) .
VERSION Bootstrap ka fɛnsɛbɛnni kelen-kelen bɛɛ bɔko bɛ se ka sɔrɔ VERSIONfɛnsɛbɛnnikɛlan ka nafolo fɛ (Misali: bootstrap.Tooltip.VERSION) .

Sanitizer ye

Baarakɛminɛnw ni Popovers bɛ baara Kɛ ni an ka saniyalan jɔlen ye walasa ka sugandiliw saniya minnu bɛ Sɔn HTML ma.

A allowListnafa fɔlɔ ye nin ye:

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

N’i ​​b’a fɛ ka nafa kuraw Fàra nin default in kan allowListi bɛ Se ka nin wale ninnu Kɛ:

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)

N’aw b’a fɛ ka tɛmɛ an ka saniyalan kan bawo aw b’a fɛ ka baara kɛ ni gafemarayɔrɔ kɛrɛnkɛrɛnnen ye, misali la DOMPurify , aw ka kan ka nin wale ninnu kɛ:

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

Ni i b’a fɛ ka baara kɛ ni jQuery ye

I mago tɛ jQuery la Bootstrap 5 kɔnɔ , nka hali bi a bɛ se ka baara kɛ ni an ka yɔrɔw ye ni jQuery ye. Ni Bootstrap jQueryye windowfɛn in Sɔrɔ, a bɛ an ka yɔrɔw bɛɛ Fàra jQuery ka 'plugin system kan. O b’a to i bɛ se ka nin wale ninnu kɛ:

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

O cogo kelen de bɛ kɛ an ka yɔrɔ tɔw la.

Kɛlɛ si tɛ yen

Tuma dɔw la, a ka kan ka baara kɛ ni Bootstrap plugins ye ni UI framework wɛrɛw ye. O cogoyaw la, tɔgɔda-yɔrɔ-ko bɛ Se ka Kɛ tuma dɔw la. N'o Kɛra, i .noConflictb'a fɛ ka plugin min nafa Lasegin, i bɛ Se k'o Weele.

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

Bootstrap tɛ JavaScript gafemarayɔrɔ wɛrɛw dɛmɛ foroba la i n’a fɔ Prototype walima jQuery UI. Hali .noConflictni ni tɔgɔda-ko kɛlenw bɛ yen, bɛnkan gɛlɛyaw bɛ se ka sɔrɔ minnu ka kan ka ɲɛnabɔ i yɛrɛ ma.

jQuery ko kɛlenw

Bootstrap bɛna jQuery dɔn ni jQuerya bɛ windowfɛn kɔnɔ ani ni fɛn si ma data-bs-no-jquerysigi sen kan <body>. Ni jQuery Sɔrɔla, Bootstrap bɛna ko kɛlenw Bɔ k'a sababu Kɛ jQuery ka ko kɛlenw sitɛmu ye. O la n'i b'a fɛ ka Bootstrap ka ko kɛlenw lamɛn, i ka kan ka baara Kɛ ni jQuery fɛɛrɛw ye ( .on, .one) addEventListener.

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

JavaScript min bɛ baara la

Bootstrap ka plugins tɛ ni fallback kɛrɛnkɛrɛnnen ye ni JavaScript bɛ baara la. N’i ​​b’i janto baarakɛlaw ka ko kɛlenw na nin ko in na, i ka baara kɛ ni <noscript>u ye walasa ka ko in ɲɛfɔ (ani JavaScript daminɛcogo kura) i ka baarakɛlaw ye, ani/walima ka i yɛrɛ ka ladamu fallbacks fara a kan.