JavaScript

Tisa Bootstrap evuton’wini hi ti-plugin ta hina ta JavaScript leti nga hlawuriwa. Dyondza hi plugin yin’wana na yin’wana, data ya hina na swihlawulekisi swa API ya phurogireme, na swin’wana.

Eka tluka leri

Hi munhu hi xiyexe kumbe leyi hlengeletiweke

Ti-plugin ti nga katsiwa hi toxe (hi ku tirhisa Bootstrap’s individual js/dist/*.js), kumbe hinkwaswo hi nkarhi wun’we hi ku tirhisa bootstrap.jskumbe leswi hungutiweke bootstrap.min.js(u nga katsi havumbirhi bya swona).

Loko u tirhisa bundler (Webpack, Parcel, Vite...), u nga tirhisa /js/dist/*.jstifayela leti nga UMD ready.

Ku tirhisiwa na swivumbeko swa JavaScript

Loko Bootstrap CSS yi nga tirhisiwa na rimba rihi na rihi, Bootstrap JavaScript a yi fambisani hi ku helela na swivumbeko swa JavaScript swo fana na React, Vue, na Angular leswi tekaka vutivi lebyi heleleke bya DOM. Havumbirhi bya Bootstrap na rimba swi nga ringeta ku cinca elemente yin’we ya DOM, leswi endlaka leswaku ku va na swihoxo swo fana na swihoxo leswi khomiweke eka xiyimo xa “ku pfuleka”.

Ndlela yin’wana yo antswa eka lava tirhisaka muxaka lowu wa swivumbeko i ku tirhisa phasela leri kongomeke eka xivumbeko ematshan’weni ya Bootstrap JavaScript. Hi leti tin’wana ta tindlela leti dumeke swinene:

Hlamula: Hlamula Bootstrap
Vue: BootstrapVue (sweswi yi seketela ntsena Vue 2 na Bootstrap 4)
Xirhendzevutani: ng-bootstrap

Ku tirhisa Bootstrap tanihi modula

Ringeta hi wexe! Download khodi ya xihlovo na demo yo tirha yo tirhisa Bootstrap tanihi modula ya ES ku suka eka vuhlayiselo bya twbs/examples . U nga ha tlhela u pfula xikombiso eka StackBlitz .

Hi nyika vuhundzuluxeri bya Bootstrap lebyi akiweke tanihi ESM( bootstrap.esm.jsna bootstrap.esm.min.js) lebyi ku pfumelelaka ku tirhisa Bootstrap tanihi modyuli eka xihlamusela-marito, loko swihlamusela-marito swa wena leswi kongomisiweke swi swi seketela .

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

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

Loko ku pimanisiwa na swihlanganisi swa JS, ku tirhisa ESM eka xihlamusela-marito swi lava leswaku u tirhisa ndlela leyi heleleke na vito ra fayili ematshan’wini ya vito ra modyuli. Hlaya swo tala hi mimojula ya JS eka browser. Hi yona mhaka leyi hi tirhisaka 'bootstrap.esm.min.js'ematshan’weni ya leswi 'bootstrap'nga laha henhla. Kambe, leswi swi tlhela swi rharhangana hi ku titshega ka hina ka Popper, loku nghenisaka Popper eka JavaScript ya hina ku fana na sweswo:

import * as Popper from "@popperjs/core"

Loko u ringeta leswi tani hi leswi swi nga xiswona, u ta vona xihoxo eka console ku fana na lexi landzelaka:

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

Ku lulamisa leswi, u nga tirhisa an importmapku lulamisa mavito ya modyuli ya ku tihlawulela ku hetisa tindlela. Loko swihlamusela-marito swa wena leswi kongomisiweke swi nga seketeli importmap, u ta lava ku tirhisa phurojeke ya es-module-shims . Hi leyi ndlela leyi swi tirhaka ha yona eka 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>

Swilo leswi titshegeke hi swona

Ti-plugin tin’wana ni swiphemu swa CSS swi titshege hi ti-plugin tin’wana. Loko u katsa ti-plugin hi toxe, tiyisisa leswaku u kambela ku titshega loku eka ti-docs.

Ti dropdowns ta hina, ti popovers, na ti toltips na tona ti titshege hi Popper .

Swihlawulekisi swa datha

Kwalomu ka ti-plugin hinkwato ta Bootstrap ti nga tirhisiwa no lulamisiwa hi ku tirhisa HTML ntsena hi swihlawulekisi swa data (ndlela ya hina leyi hi yi tsakelaka yo tirhisa ntirho wa JavaScript). Tiyisisa leswaku u tirhisa ntsena sete yin’we ya swihlawulekisi swa datha eka elemente yin’we (xikombiso, a wu nge pfuli xitsundzuxo xa xitirhisiwa na modal ku suka eka buti yin’we.)

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Swihlawulekisi

Hi tirhisa native querySelectorna querySelectorAlltindlela ku vutisa swiaki swa DOM hi swivangelo swa matirhelo, kutani u fanele ku tirhisa swihlawulekisi leswi tirhaka . Loko u tirhisa swihlawulekisi swo hlawuleka swo fana na collapse:Example, tiyiseka leswaku u swi balekela.

Swiendlakalo

Bootstrap yi nyika swiendlakalo swa ntolovelo eka swiendlo swo hlawuleka swa ti-plugin to tala. Hi ntolovelo, leswi swi ta hi xivumbeko xa xiendliwa lexi nga heriki na xiendliwa lexi hundzeke - laha xiendliwa lexi nga heriki (ex. show) xi pfuriwaka eku sunguleni ka xiendlakalo, naswona xivumbeko xa xona xa xiendliwa lexi hundzeke (ex. shown) xi pfuriwa loko xiendlo xi hetisisiwa.

Swiendlakalo hinkwaswo leswi nga heriki swi nyika preventDefault()ntirho. Leswi swi nyika vuswikoti byo yimisa ku hetisisiwa ka xiendlo xi nga si sungula. Ku vuyisa mavunwa ku suka eka mufambisi wa xiendlakalo na swona swi ta vitana hi ku tisungulela preventDefault().

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

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

API ya minongonoko

Vaaki hinkwavo va amukela nchumu wa swihlawulekisi swa ku hlawula kumbe ku nga ri nchumu (lexi sungulaka xiengetelo hi mahanyelo ya xona ya xiviri):

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

Loko u lava ku kuma xikombiso xo karhi xa xiengetelo, xiengetelo xin’wana ni xin’wana xi paluxa getInstancendlela yo karhi. Xikombiso, ku vuyisa xikombiso hi ku kongoma eka elemente:

bootstrap.Popover.getInstance(myPopoverEl)

Ndlela leyi yi ta vuya nullloko xikombiso xi nga sunguriwanga ehenhla ka elemente leyi komberiweke.

Hi ndlela yin’wana, getOrCreateInstanceyi nga tirhisiwa ku kuma xikombiso lexi fambelanaka na xiaki xa DOM, kumbe ku tumbuluxa lexintshwa loko ko tshuka ku nga sunguriwanga.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Loko ku ri leswaku xikombiso xi nga sunguriwanga, xi nga ha amukela no tirhisa nchumu wa vuhlanganisi lowu nga hlawuriwa tanihi njhekanjhekisano wa vumbirhi.

Swihlawulekisi swa CSS eka swiaki

Ku engetela eka tindlela ta getInstancena getOrCreateInstance, swiaki hinkwaswo swa ti-plugin swi nga amukela xiaki xa DOM kumbe xihlawulekisi xa CSS lexi tirhaka tanihi xivutiso xo sungula. Swiaki swa ti-plugin swi kumeka na querySelectorndlela tanihileswi ti-plugin ta hina ti seketelaka elemente yin’we ntsena.

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

Mintirho ya asynchronous na ku cinca

Maendlelo hinkwawo ya API ya phurogireme a ma asynchronous naswona ma tlhelela eka mufoyini loko ku cinca ku sungurile, kambe ku nga si hela . Leswaku u endla xiendlo loko ku cinca ku herile, u nga yingisela xiendlakalo lexi fambisanaka na xona.

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

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

Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

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

Hambileswi swi nga ha vonakaka swi ri swinene ku tirhisa disposendlela leyi hi ku hatlisa endzhaku ka hide(), swi ta endla leswaku ku va ni vuyelo lebyi hoxeke. Hi lexi xikombiso xa matirhiselo ya xiphiqo:

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

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

Switirhisiwa swa ntolovelo

U nga cinca swiletelo swa xiviri swa xiengetelo hi ku cinca Constructor.Defaultnchumu wa xiengetelo:

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

Maendlelo na swihlawulekisi

Plugin yin’wana na yin’wana ya Bootstrap yi paluxa tindlela leti landzelaka na swihlawulekisi swa static.

Ndlela	Nhlamuselo
`dispose`	Ku herisa modal ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
`getInstance`	Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa modal lexi fambelanaka na elemente ya DOM.
`getOrCreateInstance`	Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa modal lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga.

Nhundzu ya xiyimo xa le henhla	Nhlamuselo
`NAME`	Ku vuyisa vito ra xiengetelo. (Xikombiso: `bootstrap.Tooltip.NAME`) .
`VERSION`	Vuhundzuluxi bya yin’wana na yin’wana ya ti-plugin ta Bootstrap byi nga nghenisiwa hi ku tirhisa `VERSION`nhundzu ya muaki wa xiengetelo (Xikombiso: `bootstrap.Tooltip.VERSION`) .

Xihlantswi xo basisa

Tooltips na Popovers swi tirhisa sanitizer ya hina leyi akiweke ku sanitize swihlawulekisi leswi amukelaka HTML.

Nhlayo ya xiviri allowListhi leyi landzelaka:

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

Loko u lava ku engetela mimpimo leyintshwa eka default leyi allowListu nga endla leswi landzelaka:

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)

Loko u lava ku hundza eka sanitizer ya hina hikuva u tsakela ku tirhisa layiburari leyi tinyiketeleke, xikombiso DOMPurify , u fanele ku endla leswi landzelaka:

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

Hi ku hlawula ku tirhisa jQuery

A wu lavi jQuery eka Bootstrap 5 , kambe swa ha koteka ku tirhisa swiphemu swa hina na jQuery. Loko Bootstrap yi kuma jQueryeka windownchumu wolowo, yi ta engetela swiphemu swa hina hinkwaswo eka sisiteme ya plugin ya jQuery. Leswi swi ku pfumelela ku endla leswi landzelaka:

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

Swi tano ni hi swiphemu swa hina leswin’wana.

Ku hava ku lwisana

Minkarhi yin’wana swa laveka ku tirhisa ti-plugin ta Bootstrap ni swivumbeko swin’wana swa UI. Eka swiyimo leswi, ku tlumbana ka ndhawu ya mavito ku nga humelela nkarhi wun’wana. Loko leswi swi humelela, u nga ha vitana .noConflicteka plugin leyi u lavaka ku tlherisela nkoka wa yona.

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

Bootstrap a yi seketeli ximfumo tilayiburari ta JavaScript ta vanhu van’wana to fana na Prototype kumbe jQuery UI. Ku nga khathariseki .noConflictswiendlakalo leswi nga ni swiphemu swa mavito, ku nga ha va ni swiphiqo swa ku fambisana leswi u faneleke u swi lulamisa hi wexe.

jSwiendlakalo swa xivutiso

Bootstrap yi ta kuma jQuery loko jQueryyi ri kona eka windownchumu naswona ku nga ri na data-bs-no-jqueryxihlawulekisi lexi vekiweke eka <body>. Loko jQuery yi kumiwile, Bootstrap yi ta humesa swiendlakalo hi ku khensa sisiteme ya swiendlakalo ya jQuery. Kutani loko u lava ku yingisela swiendlakalo swa Bootstrap, u ta boheka ku tirhisa tindlela ta jQuery ( .on, .one) ematshan’weni ya addEventListener.

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

JavaScript yi pfaleriwile

Ti-plugin ta Bootstrap a ti na fallback yo hlawuleka loko JavaScript yi nga tirhi. Loko u khathala hi ntokoto wa mutirhisi eka mhaka leyi, tirhisa <noscript>ku hlamusela xiyimo (na ndlela yo tlhela u pfumelela JavaScript) eka vatirhisi va wena, na/kumbe ku engetela ti-fallback ta wena ta ntolovelo.