JavaScript
Na Bootstrap nagbɔ agbe kple míaƒe JavaScript ƒe kpeɖeŋutɔ siwo míetia. Srɔ̃ nu tso plugin ɖesiaɖe ŋu, míaƒe nyatakakawo kple ɖoɖowɔɖi ƒe API ƒe tiatiawɔblɔɖewo, kple bubuwo ŋu.
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.js
alo esiwo woɖe ɖe vovo bootstrap.min.js
(mègade evea siaa eme o).
Ne èzã bundler (Webpack, Rollup...), àteŋu azã /js/dist/*.js
faɛ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.js
kple 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>
Plugin siwo mewɔ ɖeka o
Le browser ƒe seɖoƒewo ta la, míaƒe plugins aɖewo, siwo nye Dropdown, Tooltip kple Popover plugins, mateŋu azã le <script>
tag si me module
type le me o elabena wonɔ te ɖe Popper dzi. Ne èdi nyatakaka bubuwo tso nyaa ŋu la, kpɔ afisia .
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 jQuery
le window
nu 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.)
Tiatiawɔlawo
Fifia be míabia DOM ƒe akpawo míezãa mɔnu gbãtɔwo querySelector
kple querySelectorAll
le dɔwɔwɔ ƒe susuwo ta, eyata ele be nàzã tiatiawɔla siwo sɔ . Ne èzã tiatiawɔnu tɔxɛwo, le kpɔɖeŋu me: collapse:Example
kpɔ egbɔ be yesi le wo nu.
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
}
})
jQuery ƒe nudzɔdzɔwo
Bootstrap akpɔ jQuery ne jQuery
ele window
nu la me eye nɔnɔme aɖeke data-bs-no-jquery
meɖo ɖe <body>
. Ne wokpɔ jQuery la, Bootstrap aɖe nudzɔdzɔwo ɖa le jQuery ƒe nudzɔdzɔwo ƒe ɖoɖoa ta. Eyata ne èdi be yease Bootstrap ƒe nudzɔdzɔwo la, ahiã be nàzã jQuery mɔnuwo ( .on
, .one
) ɖe addEventListener
.
$('#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 getInstance
mɔ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 querySelector
mɔ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.Default
nu ŋ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ɔ .noConflict
plugin 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 VERSION
kpeɖ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.0.2"
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.
Ame etɔ̃lia ƒe agbalẽdzraɖoƒewo
Bootstrap medoa alɔ ame etɔ̃lia ƒe JavaScript agbalẽdzraɖoƒewo abe Prototype alo jQuery UI ene le se nu o. Togbɔ be .noConflict
nudzɔdzɔwo li eye wotsɔ ŋkɔwo ɖo wo dome hã la, kuxi siwo sɔ kple wo nɔewo ate ŋu anɔ anyi siwo wòle be nàɖɔ ɖo le ɖokuiwò si.
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 allowList
lae 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)
}
})