Javascript

Weta Bootstrap ndụ site na mgbakwunye Javascript nhọrọ anyị. Mụta maka ngwa mgbakwunye ọ bụla, data anyị na nhọrọ API mmemme, yana ndị ọzọ.

Na ibe a

Onye ma ọ bụ chịkọtara

Enwere ike itinye ngwa mgbakwunye n'otu n'otu (iji Bootstrap's onye js/dist/*.js), ma ọ bụ ihe niile n'otu oge na-eji bootstrap.jsma ọ bụ nke pere mpe bootstrap.min.js(anaghị etinye ha abụọ).

Ọ bụrụ na ị na-eji bundler (Webpack, Parcel, Vite…), ị nwere ike iji /js/dist/*.jsfaịlụ ndị dị njikere UMD.

Ojiji nwere usoro Javascript

Ọ bụ ezie na enwere ike iji Bootstrap CSS na usoro ọ bụla, Bootstrap Javascript adabaghị n'ụzọ zuru ezu na usoro Javascript dị ka React, Vue, na Angular nke na-ewere ihe ọmụma zuru oke nke DOM. Ma Bootstrap na usoro ahụ nwere ike ịnwa ịmegharị otu ihe ahụ DOM, na-ebute ahụhụ dị ka mkpọda nke rapaara n'ọnọdụ "emeghe".

Nhọrọ kacha mma maka ndị na-eji ụdị usoro a bụ iji ngwugwu akọwapụtara nke ọma kama Bootstrap JavaScript. Nke a bụ ụfọdụ nhọrọ kacha ewu ewu:

Mmeghachi omume: Mee Bootstrap
Vue: BootstrapVue (ugbu a na-akwado Vue 2 na Bootstrap 4)
Angular: ng-bootstrap

Iji Bootstrap dị ka modul

Gbalịa ya n'onwe gị! Budata koodu iyi yana ngosi arụ ọrụ maka iji Bootstrap dị ka modul ES site na ebe nchekwa twbs/ihe atụ . Ị nwekwara ike imepe ihe atụ na StackBlitz .

Anyị na-enye ụdị Bootstrap wuru dị ka ESM( bootstrap.esm.jsna bootstrap.esm.min.js) nke na-enye gị ohere iji Bootstrap dị ka modul na ihe nchọgharị ahụ, ma ọ bụrụ na ihe nchọgharị gị ezubere iche na-akwado ya .

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

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

E jiri ya tụnyere JS bundler, iji ESM na ihe nchọgharị chọrọ ka ị jiri ụzọ zuru ezu na aha faịlụ kama aha modul. Gụkwuo maka modul JS na ihe nchọgharị ahụ. Ọ bụ ya mere anyị ji eji 'bootstrap.esm.min.js'kama 'bootstrap'n'elu. Agbanyeghị, nke a gbagwojuru anya site na ndabere Popper anyị, nke na-ebubata Popper na Javascript anyị dị ka:

import * as Popper from "@popperjs/core"

Ọ bụrụ na ịnwale nke a dị ka ọ dị, ị ga-ahụ mperi na console dị ka ndị a:

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

Iji dozie nke a, ị nwere ike iji ihe importmapdozie aha modul aka ike iji mechaa ụzọ. Ọ bụrụ na ihe nchọgharị gị ezubere iche anaghị akwado importmap, ị ga-achọ iji ọrụ es-module-shims . Nke a bụ ka ọ si arụ ọrụ maka Bootstrap na 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>

Ndabere

Ụfọdụ plugins na ngwa CSS na-adabere na plugins ndị ọzọ. Ọ bụrụ na ị gụnyere plugins n'otu n'otu, jide n'aka na ịlele maka ndabere ndị a na docs.

Ihe ndapụta anyị, popovers, na ndụmọdụ ngwaọrụ dabere na Popper .

Njirimara data

Ihe fọrọ nke nta ka ọ bụrụ plugins Bootstrap niile nwere ike ịme ma hazie ya site na HTML naanị ya na njirimara data (ụzọ kachasị amasị anyị iji ọrụ Javascript). Jide n'aka na ị ga -eji naanị otu njirimara data na otu mmewere (dịka ọmụmaatụ, ị nweghị ike ịkpalite ngwa ọrụ na modal site na otu bọtịnụ ahụ.)

Dịka enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript, ị nwere ike itinye aha nhọrọ na data-bs-, dịka na data-bs-animation="{value}". Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na " camelCase " gaa na " kebab-case " mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, jiri data-bs-custom-class="beautifier"kama data-bs-customClass="beautifier".

Dịka nke Bootstrap 5.2.0, akụrụngwa niile na-akwado njirimara data echekwara nnwaledata-bs-config nke nwere ike idobe nhazi akụrụngwa dị mfe dị ka eriri JSON. Mgbe mmewere nwere data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"njiri mara, uru ikpeazụ titlega-abụ 456na njirimara data dị iche ga-ewepụ ụkpụrụ enyere na data-bs-config. Na mgbakwunye, njirimara data dị adị nwere ike idobe ụkpụrụ JSON dịka data-bs-delay='{"show":0,"hide":150}'.

Ndị na-ahọpụta

Anyị na-eji nke ala querySelectorna querySelectorAllụzọ iji jụọ ihe DOM maka ebumnuche arụmọrụ, yabụ ị ga-eji ndị nhọpụta ziri ezi . Ọ bụrụ na ị na-eji ndị nhọpụta pụrụ iche dị ka collapse:Example, jide n'aka na ị ga-agbanarị ha.

Ihe omume

Bootstrap na-enye mmemme omenala maka ọtụtụ omume pụrụ iche nke plugins. N'ozuzu, ndị a na-abịa n'ụdị njedebe na nke gara aga - ebe njedebe (dịka show) na-akpalite na mmalite nke mmemme, na ụdị nsonye ya gara aga (dịka shown) na-akpalite na mmecha nke omume.

Ihe omume enweghị ngwụcha na-enye preventDefault()ọrụ. Nke a na-enye ikike ịkwụsị mmezu nke ihe tupu ya amalite. Iweghachi ụgha site na onye njikwa mmemme ga-akpọkwa akpaghị aka preventDefault().

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

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

API mmemme

Ndị nrụpụta niile na-anabata ihe nhọrọ nhọrọ ma ọ bụ ihe ọ bụla (nke na-ebute ngwa mgbakwunye na omume ndabara):

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

Ọ bụrụ na ị ga-achọ ịnweta otu ngwa mgbakwunye ọmụmaatụ, ngwa mgbakwunye ọ bụla na-ekpughe otu getInstanceusoro. Dịka ọmụmaatụ, iweghachite ọmụmaatụ ozugbo site na mmewere:

bootstrap.Popover.getInstance(myPopoverEl)

Usoro a ga-alọghachi nullma ọ bụrụ na ebidoghị ihe atụ n'elu ihe achọrọ.

N'aka nke ọzọ, getOrCreateInstanceenwere ike iji nweta ihe atụ jikọtara ya na mmewere DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Ọ bụrụ na ebidoghị ihe atụ, ọ nwere ike nabata wee jiri ihe nhazi nhọrọ dị ka arụmụka nke abụọ.

Ndị na-ahọpụta CSS na ndị nrụpụta

Na mgbakwunye na usoro getInstancena getOrCreateInstanceusoro, ndị nrụpụta ngwa mgbakwunye niile nwere ike ịnakwere ihe DOM ma ọ bụ onye na- ahọrọ CSS dị mma dị ka arụmụka mbụ. A na-achọta ihe mgbakwunye na querySelectorusoro ahụ ebe plugins anyị na-akwado naanị otu mmewere.

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

Ọrụ asynchronous na ntụgharị

Ụzọ API mmemme niile na- adakọbara ma laghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere, mana tupu ọ akwụsị . Iji mee ihe ozugbo mgbanwe ahụ gwụchara, ị nwere ike ige ntị na mmemme kwekọrọ.

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

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

Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

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`usoro

Ọ bụ ezie na ọ nwere ike iyi ihe ziri ezi iji disposeusoro ahụ ozugbo hide(), ọ ga-ebute nsonaazụ na-ezighi ezi. Nke a bụ ọmụmaatụ ojiji nsogbu:

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

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

Ntọala mbụ

Ị nwere ike ịgbanwe ntọala ndabara maka ngwa mgbakwunye site n'ịgbanwe ihe ngwa mgbakwunye Constructor.Default:

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

Ụzọ na akụrụngwa

Ngwa mgbakwunye Bootstrap ọ bụla na-ekpughe ụzọ ndị a yana njirimara kwụ ọtọ.

Usoro	Nkọwa
`dispose`	Na-emebi ụkpụrụ mmewere. (Na-ewepụ data echekwara na mmewere DOM)
`getInstance`	Usoro static nke na-enye gị ohere ịnweta ihe atụ modal jikọtara ya na ihe DOM.
`getOrCreateInstance`	Usoro static nke na-enye gị ohere ịnweta ihe atụ modal jikọtara ya na mmewere DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.

Ihe onwunwe kwụ ọtọ	Nkọwa
`NAME`	Na-eweghachi aha ngwa mgbakwunye. (Ọmụmaatụ `bootstrap.Tooltip.NAME`:)
`VERSION`	Enwere ike ịnweta ụdị plugins Bootstrap ọ bụla site na `VERSION`akụrụngwa nke ihe nrụpụta ngwa mgbakwunye (Ihe atụ `bootstrap.Tooltip.VERSION`:)

Sanitizer

Ntuziaka ngwaọrụ na Popovers na-eji sanitizer arụnyere n'ime anyị iji kpochapụ nhọrọ ndị na-anabata HTML.

allowListUru ndabara bụ nke a:

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

Ọ bụrụ na ịchọrọ ịgbakwunye ụkpụrụ ọhụrụ na ndabara a allowListị nwere ike ime ihe ndị a:

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)

Ọ bụrụ na ịchọrọ ịgafe sanitizer anyị n'ihi na ịchọrọ iji ọbá akwụkwọ raara onwe ya nye, dịka ọmụmaatụ DOMPurify , ị ga-eme ihe ndị a:

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

Nhọrọ na-eji jQuery

Ịchọghị jQuery na Bootstrap 5 , mana ọ ka nwere ike iji jQuery anyị jiri ihe ndị dị na ya mee ihe. Ọ bụrụ na Bootstrap chọpụta jQueryn'ime ihe windowahụ, ọ ga-agbakwunye ihe anyị niile na sistemụ ngwa mgbakwunye jQuery. Nke a na-enye gị ohere ịme ihe ndị a:

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

Otu ihe ahụ na-aga maka ihe ndị ọzọ anyị.

Enweghị esemokwu

Mgbe ụfọdụ, ọ dị mkpa iji plugins Bootstrap nwere usoro UI ndị ọzọ. N'ọnọdụ ndị a, ndakọrịta oghere aha nwere ike ime mgbe ụfọdụ. Ọ bụrụ na nke a emee, ị nwere ike ịkpọ .noConflictna ngwa mgbakwunye ịchọrọ iweghachi uru nke.

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

Bootstrap anaghị akwado ọba akwụkwọ JavaScript nke ndị ọzọ dị ka Prototype ma ọ bụ jQuery UI. N'agbanyeghị .noConflictna ihe omume kpọpụtara aha, enwere ike ịnwe nsogbu ndakọrịta nke ịchọrọ idozi n'onwe gị.

mmemme jQuery

Bootstrap ga-achọpụta jQuery ma ọ bụrụ na ọ jQuerydị na windowihe ahụ ma ọ nweghị data-bs-no-jqueryàgwà atọrọ na <body>. Ọ bụrụ na achọtara jQuery, Bootstrap ga-ebupụta mmemme ekele maka sistemụ mmemme jQuery. Yabụ ọ bụrụ na ịchọrọ ige ntị na mmemme Bootstrap, ị ga-eji usoro jQuery ( .on, .one) kama addEventListener.

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

Javascript agbanyụrụ

Ihe mgbakwunye Bootstrap enweghị ọdịda pụrụ iche mgbe Javascript nwere nkwarụ. Ọ bụrụ na ị na-eche banyere ahụmahụ onye ọrụ na nke a, jiri <noscript>kọwaa ọnọdụ ahụ (na otu esi eme ka Javascript dịghachi) nye ndị ọrụ gị, na / ma ọ bụ gbakwunye ọdịda omenala nke gị.