JavaScript a ɛwɔ hɔ no

Ankorankoro anaasɛ wɔaboaboa ano

Wobetumi de plugins aka ho mmiako mmiako (fa Bootstrap's individual js/dist/*.js), anaasɛ ne nyinaa prɛko pɛ de adi dwuma bootstrap.jsanaasɛ nea wɔayɛ no ketewaa bootstrap.min.js(mfa abien no nyinaa nka ho).

Sɛ wode bundler (Webpack, Rollup...) di dwuma a, wubetumi de /js/dist/*.jsfael ahorow a ɛyɛ UMD ayɛ krado adi dwuma.

Bootstrap a wode bedi dwuma sɛ module

Yɛde Bootstrap no bi a wɔasisi sɛ ESM( bootstrap.esm.jsne bootstrap.esm.min.js) a ɛma wo kwan ma wode Bootstrap di dwuma sɛ module wɔ wo browser no mu ma, sɛ wo browser ahorow a wode w’ani asi so no boa a .

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

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

Nneɛma a wɔde wɔn ho to so

Plugin ne CSS afã horow bi gyina plugins afoforo so. Sɛ wode plugins ka ho mmiako mmiako a, hwɛ hu sɛ wobɛhwɛ saa dependencies yi wɔ docs no mu.

Yɛn dropdowns, popovers ne tooltips nso gyina Popper so .

Woda so ara pɛ sɛ wode jQuery di dwuma? Ebetumi aba saa!

Wɔayɛ Bootstrap 5 sɛ wɔde bedi dwuma a jQuery nka ho, nanso ɛda so ara yɛ yiye sɛ wode yɛn afã horow no bedi dwuma wɔ jQuery mu. Sɛ Bootstrap hu jQuerywɔ windowade no mu a ɛde yɛn afã horow nyinaa bɛka ho wɔ jQuery no plugin nhyehyɛe no mu; wei kyerɛ sɛ wobɛtumi ayɛ $('[data-bs-toggle="tooltip"]').tooltip()de ama adwinnadeɛ ho nsɛm ayɛ adwuma. Saa ara na yɛn afã afoforo no nso te.

Data su ahorow

Ɛkame ayɛ sɛ wobetumi ama Bootstrap plugins nyinaa ayɛ adwuma na wɔahyehyɛ no denam HTML nkutoo so a ɛwɔ data su ahorow (ɔkwan a yɛpɛ a yɛfa so de JavaScript dwumadi di dwuma). Hwɛ sɛ wode data su ahorow biako pɛ bedi dwuma wɔ element biako so (sɛ nhwɛso no, wuntumi nhyɛ adwinnade ti ne modal mfi bɔtn koro no ara mu.)

Nsɛm a esisi

Bootstrap ma amanneɛbɔ nsɛm a esisi ma plugins dodow no ara nneyɛe soronko. Mpɛn pii no, eyinom ba wɔ asɛmfua a enni awiei ne adeyɛ a atwam mu - baabi a wɔde asɛmfua a enni awiei (ex. show) no kanyan wɔ adeyɛ bi mfiase, na ne adeyɛ asɛm bi a atwam (ex. shown) no fi ase bere a adeyɛ bi awie no.

Nsɛm a esisi a enni awiei nyinaa ma wotumi preventDefault()yɛ adwuma. Eyi ma wotumi gyina adeyɛ bi a wɔyɛ no ano ansa na afi ase. Sɛ wosan de false fi event handler mu ba a, ɛno nso bɛfrɛ preventDefault().

var myModal = document.getElementById('myModal')

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

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

Dwumadie API

Constructors nyinaa gye optional options object anaasɛ hwee (a ɛhyɛ plugin ase ne ne default suban):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Sɛ wopɛ sɛ wonya plugin nhwɛso pɔtee bi a, plugin biara da getInstanceɔkwan bi adi. Sɛnea ɛbɛyɛ a wubenya afi element bi mu tẽẽ no, yɛ eyi: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors wɔ constructors mu

Wubetumi nso de CSS selector adi dwuma sɛ akasakasa a edi kan sen sɛ wode DOM element bedi dwuma de ahyɛ plugin no ase. Mprempren element a ɛwɔ plugin no ho no, wohu no denam querySelectorɔkwan no so efisɛ yɛn plugins no boa element biako pɛ.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Asynchronous dwumadie ne nsakraeɛ

Programmatic API akwan nyinaa yɛ asynchronous na ɛsan kɔ nea ɔfrɛ no no nkyɛn bere a wɔafi ase nsakrae no nanso ansa na aba awiei .

Sɛnea ɛbɛyɛ a wobɛyɛ adeyɛ bi bere a nsakrae no awie no, wubetumi atie adeyɛ a ɛne no hyia no.

var myCollapseEl = document.getElementById('myCollapse')

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

Nea ɛka ho no wobebu ani agu ɔkwan frɛ bi so wɔ nsakrae fã bi so .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

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

Nsiesiei ahorow a wɔahyɛ da ayɛ

Wubetumi asesa nhyehyɛe a wɔahyɛ da ayɛ ama plugin bi denam plugin no Constructor.Defaultade a wobɛsesa no so:

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

Ntawntawdi biara nni hɔ (sɛ wode jQuery di dwuma nkutoo a)

Ɛtɔ da bi a ɛho hia sɛ wode Bootstrap plugins di dwuma ne UI frameworks afoforo. Wɔ saa tebea horow yi mu no, edin-ahunmu nhyiam betumi aba bere ne bere mu. Sɛ eyi ba a, wubetumi afrɛ .noConflictplugin a wopɛ sɛ wosan de bo no ba no.

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

Nkyerɛase nɔma ahorow

Wobetumi afa VERSIONplugin no constructor no agyapade so akɔ Bootstrap no plugins no mu biara version no so. Sɛ nhwɛso no, wɔ adwinnade ho nkyerɛkyerɛmu plugin no ho no:

bootstrap.Tooltip.VERSION // => "5.0.2"

Fallbacks titiriw biara nni hɔ bere a wɔagyae JavaScript no

Bootstrap no plugins no nkɔ akyi titiriw gracefully bere a JavaScript ayɛ adwuma no. Sɛ wodwene dwumadiefoɔ suahunu ho wɔ saa asɛm yi mu a, fa <noscript>kyerɛkyerɛ tebea no mu (ne sɛdeɛ wobɛsan ama JavaScript ayɛ adwuma) ama wo dwumadiefoɔ, ne/anaasɛ fa w’ankasa wo custom fallbacks ka ho.

Nneɛma a wɔde tew nneɛma ho

Tooltips ne Popovers de yɛn sanitizer a wɔasisi no di dwuma de sanitize options a egye HTML.

Default allowListvalue no ne nea edidi so yi:

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

Sɛ wopɛ sɛ wode values ​​foforo ka default yi allowListho a wubetumi ayɛ nea edidi so yi:

var 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
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Sɛ wopɛ sɛ wutwa yɛn sanitizer no ho esiane sɛ wopɛ sɛ wode nhomakorabea a wɔatu ho ama di dwuma nti, sɛ nhwɛso no DOMPurify , ɛsɛ sɛ woyɛ nea edidi so yi:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})