JavaScript

Endividyèl oswa konpile

Plugins yo ka enkli endividyèlman (lè l sèvi avèk endividyèl Bootstrap a js/dist/*.js), oswa tout nan yon fwa lè l sèvi avèk bootstrap.jsoswa minified la bootstrap.min.js(pa enkli tou de).

Si w itilize yon bundler (Webpack, Rollup...), ou ka itilize /js/dist/*.jsfichye ki pare UMD.

Sèvi ak Bootstrap kòm yon modil

Nou bay yon vèsyon Bootstrap ki te konstwi kòm ESM( bootstrap.esm.jsak bootstrap.esm.min.js) ki pèmèt ou itilize Bootstrap kòm yon modil nan navigatè ou a, si navigatè sible ou yo sipòte li .

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

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

Depandans

Gen kèk grefon ak eleman CSS depann sou lòt grefon. Si ou enkli grefon endividyèlman, asire w ou tcheke pou depandans sa yo nan dokiman yo.

Dropdowns, popovers ak konsèy sou zouti nou yo depann tou de Popper .

Toujou vle sèvi ak jQuery? Li posib!

Bootstrap 5 fèt pou itilize san jQuery, men li toujou posib pou itilize konpozan nou yo ak jQuery. Si Bootstrap detekte jQuerynan windowobjè a li pral ajoute tout eleman nou yo nan sistèm plugin jQuery a; sa vle di ou pral kapab fè $('[data-bs-toggle="tooltip"]').tooltip()pou pèmèt konsèy sou zouti. Menm bagay la tou ale pou lòt konpozan nou yo.

Done atribi

Prèske tout grefon Bootstrap yo ka aktive ak konfigirasyon atravè HTML pou kont li ak atribi done (fason pi pito nou an pou itilize fonksyonalite JavaScript). Asire ou ke ou itilize sèlman yon seri atribi done sou yon sèl eleman (egzanp, ou pa ka deklanche yon konsèy sou zouti ak modal nan menm bouton an.)

Evènman

Bootstrap bay evènman koutim pou aksyon inik pifò grefon yo. Anjeneral, sa yo vini nan yon fòm enfinitif ak patisipan sot pase yo - kote infinitif la (egzanp show) deklanche nan kòmansman yon evènman, ak fòm patisipasyon sot pase li yo (egzanp shown) deklanche sou fini yon aksyon.

Tout evènman infinitif bay preventDefault()fonksyonalite. Sa a bay kapasite pou sispann ekzekisyon yon aksyon anvan li kòmanse. Retounen fo soti nan yon moun kap okipe evènman yo pral otomatikman rele tou 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...
})

Pwogram API

Tout konstrukteur aksepte yon opsyon opsyon opsyon oswa anyen (ki inisye yon Plugin ak konpòtman default li yo):

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

Si ou ta renmen jwenn yon egzanp patikilye plugin, chak plugin ekspoze yon getInstancemetòd. Pou kapab rekipere li dirèkteman nan yon eleman, fè sa: bootstrap.Popover.getInstance(myPopoverEl).

Selektè CSS nan konstrukteur

Ou kapab tou itilize yon seleksyon CSS kòm premye agiman olye de yon eleman DOM pou inisyalize Plugin la. Kounye a se eleman pou Plugin la jwenn pa querySelectormetòd la depi grefon nou yo sipòte yon sèl eleman sèlman.

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

Fonksyon asynchrone ak tranzisyon

Tout metòd API pwogramasyon yo asenkron epi retounen nan moun k ap rele a yon fwa tranzisyon an kòmanse men anvan li fini .

Pou egzekite yon aksyon yon fwa tranzisyon an fini, ou ka koute evènman ki koresponn lan.

var myCollapseEl = document.getElementById('myCollapse')

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

Anplis de sa , yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

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

Anviwònman defo

Ou ka chanje paramèt defo pou yon plugin lè w modifye Constructor.Defaultobjè plugin a:

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

Pa gen konfli (sèlman si w itilize jQuery)

Pafwa li nesesè pou itilize grefon Bootstrap ak lòt kad UI. Nan sikonstans sa yo, kolizyon espas non ka detanzantan rive. Si sa rive, ou ka rele .noConflictsou Plugin ou vle retounen valè a.

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

Nimewo vèsyon yo

Ou ka jwenn vèsyon an nan chak nan grefon Bootstrap la atravè VERSIONpwopriyete a nan konstrukteur plugin a. Pa egzanp, pou plugin tooltip la:

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

Pa gen bak espesyal lè JavaScript enfim

Plugins Bootstrap yo pa tonbe patikilyèman avèk gras lè JavaScript enfim. Si ou pran swen eksperyans itilizatè a nan ka sa a, sèvi ak <noscript>yo eksplike sitiyasyon an (ak ki jan yo re-aktive JavaScript) itilizatè ou yo, epi/oswa ajoute pwòp repwodiksyon koutim ou yo.

Dezenfektan

Tooltips ak Popovers itilize dezenfektan entegre nou an pou dezenfekte opsyon ki aksepte HTML.

Valè default allowListla se sa ki annapre yo:

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

Si ou vle ajoute nouvo valè nan default sa a allowListou ka fè bagay sa yo:

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)

Si ou vle kontoune dezenfektan nou an paske ou prefere sèvi ak yon bibliyotèk devwe, pa egzanp DOMPurify , ou ta dwe fè bagay sa yo:

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