JavaScript
Bay Bootstrap lavi ak grefon JavaScript opsyonèl nou yo. Aprann sou chak plugin, done nou yo ak opsyon API pwogramasyon, ak plis ankò.
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.js
oswa minified la bootstrap.min.js
(pa enkli tou de).
Si w itilize yon bundler (Webpack, Rollup...), ou ka itilize /js/dist/*.js
fichye 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.js
ak 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>
Plugins enkonpatib
Akòz limit navigatè, kèk nan grefon nou yo, sètadi Dropdown, Tooltip ak Popover grefon, pa ka itilize nan yon <script>
tag ki gen module
kalite paske yo depann de Popper. Pou plis enfòmasyon sou pwoblèm nan gade isit la .
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 jQuery
nan window
objè 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.)
Sélecteurs
Kounye a pou nou fè rechèch sou eleman DOM nou itilize metòd natif natal querySelector
ak querySelectorAll
pou rezon pèfòmans, kidonk ou dwe itilize seleksyon ki valab . Si ou itilize seleksyon espesyal, pou egzanp: collapse:Example
asire w ke ou chape anba yo.
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
}
})
Evènman jQuery
Bootstrap pral detekte jQuery si jQuery
prezan nan window
objè a epi pa gen okenn data-bs-no-jquery
atribi ki mete sou <body>
. Si yo jwenn jQuery, Bootstrap pral emèt evènman gras a sistèm evènman jQuery a. Se konsa, si ou vle koute evènman Bootstrap yo, ou pral oblije sèvi ak metòd yo jQuery ( .on
, .one
) olye pou yo addEventListener
.
$('#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 getInstance
metò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 querySelector
metò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.Default
objè 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 .noConflict
sou 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è VERSION
pwopriyete a nan konstrukteur plugin a. Pa egzanp, pou plugin tooltip la:
bootstrap.Tooltip.VERSION // => "5.0.2"
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.
Bibliyotèk twazyèm pati
Bootstrap pa sipòte ofisyèlman bibliyotèk JavaScript twazyèm pati tankou Prototype oswa jQuery UI. Malgre .noConflict
ak evènman namespaced, ka gen pwoblèm konpatibilite ke ou bezwen ranje poukont ou.
Dezenfektan
Tooltips ak Popovers itilize dezenfektan entegre nou an pou dezenfekte opsyon ki aksepte HTML.
Valè default allowList
la 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 allowList
ou 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)
}
})