JavaScript

Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (zã Bootstrap ƒe ɖekaɖeka js/dist/*.js), alo wo katã zi ɖeka to zazã bootstrap.jsalo esiwo woɖe ɖe vovo bootstrap.min.js(mègade evea siaa eme o).

Ne èzã bundler (Webpack, Rollup...), àteŋu azã /js/dist/*.jsfaɛl siwo le klalo na UMD.

Bootstrap zazã abe module ene

Míena Bootstrap ƒe tɔtrɔ aɖe si wotu abe ESM( bootstrap.esm.jskple bootstrap.esm.min.js) si na nète ŋu zãa Bootstrap abe module ene le wò web-browser me, ne wò web-browser siwo nèɖo taɖodzinu na la doa alɔe .

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

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

Nusiwo dzi woanɔ te ɖo

Plugin aɖewo kple CSS ƒe akpa aɖewo nɔa te ɖe plugin bubuwo dzi. Ne ède plugins ɖekaɖeka la, kpɔ egbɔ be yelé ŋku ɖe nusiwo dzi woanɔ te ɖo siawo ŋu le docs la me.

Míaƒe dropdowns, popovers kple dɔwɔnu ƒe aɖaŋuɖoɖowo hã nɔ te ɖe Popper dzi .

Àgadi kokoko be yeazã jQuery? Ate ŋu adzɔ!

Wotrɔ asi le Bootstrap 5 ŋu be woazã jQuery manɔmee, gake egate ŋu adzɔ kokoko be woazã míaƒe akpawo kple jQuery. Ne Bootstrap de dzesi jQueryle windownu la me la, atsɔ míaƒe akpawo katã akpe ɖe jQuery ƒe plugin ɖoɖoa ŋu; esia fia be àte ŋu awɔe $('[data-bs-toggle="tooltip"]').tooltip()be dɔwɔnu ƒe aɖaŋuɖoɖowo nawɔ dɔ. Nenema kee wòle le míaƒe akpa bubuawo hã gome.

Nyatakaka ƒe nɔnɔmewo

Woateŋu awɔ Bootstrap ƒe kpeɖeŋutɔwo katã kloe ŋudɔ eye woaɖo wo ɖe ɖoɖo nu to HTML ɖeɖeko dzi kple nyatakaka ƒe nɔnɔmewo (mɔ si míelɔ̃na wu be míazã JavaScript ƒe dɔwɔwɔ). Kpɔ egbɔ be yezã nyatakaka ƒe nɔnɔmewo ƒe hatsotso ɖeka ko ɖe nu ɖeka dzi (le kpɔɖeŋu me, màte ŋu aʋu dɔwɔnu ƒe aɖaŋuɖoɖo kple modal tso abɔta ɖeka dzi o.)

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugins akpa gãtɔ ƒe nuwɔna tɔxɛwo. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple akpaɖekedzimademade ƒe nɔnɔme si va yi me - afisi wodzea nyagbemanɔsitɔ (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpaɖekedzimademade ƒe nɔnɔme si va yi (ex. shown) dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefault()dɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme. Ne ètrɔ alakpa tso nudzɔdzɔwo gbɔ kpɔla me la, ayɔ hã le eɖokui si 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...
})

Ðoɖowɔɖi ƒe API

Xɔtulawo katã xɔa tiatiawɔblɔɖe ƒe nu alo naneke o (si dzea kpeɖeŋutɔ gɔme kple eƒe nuwɔna gbãtɔ):

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

Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, plugin ɖesiaɖe ɖea getInstancemɔnu aɖe ɖe go. Be nàte ŋu axɔe tso element aɖe me tẽ la, wɔ esia: bootstrap.Popover.getInstance(myPopoverEl).

CSS tiatiawɔlawo le xɔtulawo me

Àteŋu azã CSS tiatiawɔla hã abe nyaʋiʋli gbãtɔ ene ɖe DOM ƒe akpa aɖe teƒe atsɔ adze kpeɖeŋutɔa gɔme. Fifia la, wokpɔa element na plugin la to querySelectormɔnu la dzi elabena míaƒe plugins doa alɔ element ɖeka ko.

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

Dɔwɔwɔ siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

Programmatic API mɔnuwo katã nye asynchronous eye wotrɔna yia yɔla gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu .

Be nàte ŋu awɔ nuwɔna aɖe ne tɔtrɔa wu enu ko la, àte ŋu ase nudzɔdzɔ si sɔ kplii.

var myCollapseEl = document.getElementById('myCollapse')

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

Tsɔ kpe ɖe eŋu la , woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

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

Ðoɖo siwo woɖo ɖi xoxo

Àteŋu atrɔ ɖoɖo siwo woɖo ɖi na plugin to asitɔtrɔ le plugin ƒe Constructor.Defaultnu ŋu:

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

Masɔmasɔ aɖeke meli o (ne èzã jQuery ko)

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

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

Version ƒe xexlẽdzesiwo

Woateŋu akpɔ Bootstrap ƒe kpeɖeŋutɔ ɖesiaɖe ƒe tɔtrɔ to VERSIONkpeɖeŋutɔa ƒe xɔtula ƒe nɔnɔme dzi. Le kpɔɖeŋu me, na dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ la:

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

Fallback tɔxɛ aɖeke meli ne wotu JavaScript o

Bootstrap ƒe plugins medzea anyi ɖe megbe etɔxɛe amenuveve ne JavaScript nye nuwɔametɔ o. Ne ètsɔ ɖe le zãla ƒe nuteƒekpɔkpɔ me le go sia me la, zã <noscript>nàtsɔ aɖe nɔnɔmea me (kple alesi nàgbugbɔ JavaScript awɔ dɔe) me na wò zãlawo, kple/alo nàtsɔ wò ŋutɔ wò fallback siwo nèwɔ la akpe ɖe eŋu.

Atike si wotsɔna klɔa nu ŋu

Dɔwɔnu ƒe aɖaŋuɖoɖowo kple Popovers zãa míaƒe dzadzɛnyenye si wotu ɖe eme tsɔ kɔa tiatia siwo xɔa HTML la ŋu.

Asixɔxɔ si woɖo ɖi allowListlae nye esiawo:

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

Ne èdi be yeatsɔ asixɔxɔ yeyewo akpe ɖe default sia ŋu la allowList, àteŋu awɔ nusiwo gbɔna:

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)

Ne èdi be yeato míaƒe dzadzɛnyenyemɔ̃a ŋu le esi nèdi be yeazã agbalẽdzraɖoƒe si woɖo ɖi koŋ ta, le kpɔɖeŋu me DOMPurify , ele be nàwɔ nu siwo gbɔna:

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