JavaScript

Indibidwal o gihugpong

Ang mga plugins mahimong iapil sa tagsa-tagsa (gamit ang Bootstrap's individual js/dist/*.js), o tanan sa usa ka higayon gamit bootstrap.jso ang minified bootstrap.min.js(ayaw iapil ang duha).

Kung mogamit ka usa ka bundler (Webpack, Rollup…), mahimo nimong gamiton ang /js/dist/*.jsmga file nga andam sa UMD.

Paggamit sa Bootstrap isip usa ka module

Naghatag kami og bersyon sa Bootstrap nga gihimo isip ESM( bootstrap.esm.jsug bootstrap.esm.min.js) nga nagtugot kanimo sa paggamit sa Bootstrap isip module sa imong browser, kung gisuportahan kini sa imong gitarget nga mga browser .

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

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

Mga pagsalig

Ang ubang mga plugins ug CSS component nagdepende sa ubang mga plugins. Kung gilakip nimo ang mga plugins nga tagsa-tagsa, siguruha nga susihon kini nga mga dependency sa mga doc.

Ang among mga dropdown, popovers ug tooltips nagdepende usab sa Popper .

Gusto gihapon mogamit jQuery? Posible kini!

Ang Bootstrap 5 gidesinyo nga gamiton nga walay jQuery, apan posible gihapon nga gamiton ang among mga sangkap sa jQuery. Kung makit-an sa Bootstrap jQueryang windowbutang , idugang niini ang tanan namon nga sangkap sa sistema sa plugin sa jQuery; kini nagpasabut nga mahimo nimo $('[data-bs-toggle="tooltip"]').tooltip()aron mahimo ang mga tooltip. Ingon usab niana ang among ubang mga sangkap.

Mga hiyas sa datos

Hapit tanan nga mga plugin sa Bootstrap mahimong ma-enable ug ma-configure pinaagi sa HTML nga nag-inusara nga adunay mga hiyas sa datos (atong gusto nga paagi sa paggamit sa JavaScript). Siguroha nga mogamit lang ug usa ka set sa data attributes sa usa ka elemento (pananglitan, dili ka maka-trigger og tooltip ug modal gikan sa samang buton.)

Mga panghitabo

Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan sa mga talagsaon nga aksyon sa mga plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang infinitive (ex. show) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown) ma-trigger sa pagkahuman sa usa ka aksyon.

Ang tanan nga infinitive nga mga panghitabo naghatag preventDefault()gamit. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod. Ang pagbalik sa bakak gikan sa tigdumala sa panghitabo awtomatiko usab nga motawag 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...
})

Programmatic API

Ang tanan nga mga konstruktor modawat sa usa ka opsyonal nga kapilian nga butang o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga kinaiya niini):

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

Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, ang matag plugin nagpadayag usa ka getInstancepamaagi. Aron makuha kini direkta gikan sa usa ka elemento, buhata kini: bootstrap.Popover.getInstance(myPopoverEl).

Mga tigpili sa CSS sa mga konstruktor

Mahimo usab nimo gamiton ang usa ka CSS selector isip unang argumento imbes usa ka elemento sa DOM aron masugdan ang plugin. Sa pagkakaron ang elemento alang sa plugin makita pinaagi sa querySelectorpamaagi tungod kay ang atong mga plugins nagsuporta sa usa ka elemento lamang.

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

Asynchronous nga mga gimbuhaton ug mga transisyon

Ang tanang programmatic API nga pamaagi kay asynchronous ug mobalik sa caller sa higayon nga masugdan na ang transisyon apan sa dili pa kini matapos .

Aron mapatuman ang usa ka aksyon kung makompleto na ang transisyon, mahimo nimong paminawon ang katugbang nga panghitabo.

var myCollapseEl = document.getElementById('myCollapse')

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

Dugang pa sa usa ka paagi sa pagtawag sa usa ka transitioning component dili tagdon .

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

Default nga mga setting

Mahimo nimong usbon ang default setting para sa usa ka plugin pinaagi sa pag-usab sa Constructor.Defaultbutang sa plugin:

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

Walay panagsumpaki (kon mogamit ka lang og jQuery)

Usahay gikinahanglan ang paggamit sa Bootstrap plugins sa ubang mga UI frameworks. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflictang plugin nga gusto nimo ibalik ang kantidad.

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

Numero sa bersyon

Ang bersyon sa matag usa sa Bootstrap's plugins mahimong ma-access pinaagi sa VERSIONpropyedad sa plugin's constructor. Pananglitan, alang sa tooltip plugin:

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

Walay espesyal nga mga fallbacks kung ang JavaScript gi-disable

Ang mga plugins sa Bootstrap dili mabalik ilabi na nga nindot kung ang JavaScript gi-disable. Kung nagpakabana ka bahin sa kasinatian sa gumagamit sa kini nga kaso, gamita <noscript>aron ipasabut ang sitwasyon (ug kung giunsa pag-usab ang JavaScript) sa imong mga tiggamit, ug / o pagdugang sa imong kaugalingon nga naandan nga mga fallback.

Sanitizer

Ang Tooltips ug Popovers naggamit sa among built-in nga sanitizer aron sanitize ang mga opsyon nga modawat sa HTML.

Ang default allowListnga bili mao ang mosunod:

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

Kung gusto nimong idugang ang bag-ong mga kantidad sa kini nga default allowListmahimo nimo ang mosunod:

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)

Kung gusto nimo nga laktawan ang among sanitizer tungod kay gusto nimo nga mogamit usa ka gipahinungod nga librarya, pananglitan DOMPuify , kinahanglan nimo buhaton ang mga musunud:

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