JavaScript
Zisa iBootstrap ebomini ngeeplagi zethu ezizikhethelayo zeJavaScript. Funda malunga neplagin nganye, idatha yethu kunye neenketho zeprogram ye-API, kunye nokunye.
Umntu ngamnye okanye uqokelelwe
Iiplagi zingabandakanywa ngokwazo (usebenzisa iBootstrap's individual js/dist/*.js
), okanye zonke ngaxeshanye usebenzisa bootstrap.js
okanye iminified bootstrap.min.js
(ungaquki zombini).
Ukuba usebenzisa i-bundler (i-Webpack, i-Rollup…), unokusebenzisa /js/dist/*.js
iifayile ezisele zilungile i-UMD.
Ukusebenzisa i-Bootstrap njengemodyuli
Sinikezela ngoguqulelo lweBootstrap eyakhiwe njenge ESM
( bootstrap.esm.js
kunye bootstrap.esm.min.js
) ekuvumela ukuba usebenzise iBootstrap njengemodyuli kwisikhangeli sakho, ukuba iibhrawuza zakho ekujoliswe kuzo ziyayixhasa .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Ii-plugins ezingahambelaniyo
Ngenxa yothintelo lwebrawuza, ezinye iiplagi zethu, ezizezi, iDropdown, Tooltip kunye nePopover plugins, azinakusetyenziswa kwithegi enohlobo <script>
kuba module
zixhomekeke kwiPopper. Ukuze ufumane inkcazelo engakumbi ngalo mba jonga apha .
Ukuxhomekeka
Ezinye iiplagi kunye namalungu eCSS axhomekeke kwezinye iiplagi. Ukuba ubandakanya ii-plugins ngabanye, qiniseka ukuba ukhangele ezi zixhomekeke kumaxwebhu.
Iidrophu zethu, iipopovers kunye netooltips nazo zixhomekeke kwiPopper .
Usafuna ukusebenzisa ijQuery? Inokwenzeka!
I-Bootstrap 5 yenzelwe ukuba isetyenziswe ngaphandle kwejQuery, kodwa kusengenzeka ukusebenzisa amacandelo ethu ngejQuery. Ukuba iBootstrap ibhaqa jQuery
kwintowindow
iyakongeza onke amalungu ethu kwinkqubo yeplagi yejQuery ; oku kuthetha ukuba uya kukwazi ukwenza $('[data-bs-toggle="tooltip"]').tooltip()
iingcebiso zesixhobo. Okufanayo kuya kwamanye amacandelo ethu.
Iimpawu zedatha
Phantse zonke iiplagi ze-Bootstrap zinokwenziwa kwaye ziqwalaselwe nge-HTML yodwa ngeempawu zedatha (indlela yethu esiyithandayo yokusebenzisa ukusebenza kweJavaScript). Qiniseka ukuba usebenzisa kuphela iseti enye yeempawu zedatha kwinto enye (umzekelo, awukwazi ukuvusa ingcebiso yesixhobo kunye nemodali ukusuka kwiqhosha elifanayo.)
Abakhethi
Okwangoku ukubuza izinto zeDOM sisebenzisa iindlela zomthonyama querySelector
kunye querySelectorAll
nezizathu zokusebenza, ke kufuneka usebenzise abakhethi abasebenzayo . Ukuba usebenzisa abakhethi abakhethekileyo, umzekelo: collapse:Example
qiniseka ukuba uyabaleka.
Iziganeko
I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show
) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown
) ivuselelwe ekugqityweni kwesenzo.
Zonke iziganeko ezingapheliyo zibonelela preventDefault()
ngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale. Ukubuyisa okungeyonyani kumphathi wesiganeko nako kuyakufowunela ngokuzenzekelayo preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
Iziganeko zejQuery
I-Bootstrap iyakubona i-jQuery ukuba jQuery
ikhona window
kwinto kwaye akukho data-bs-no-jquery
phawu lusekiweyo <body>
. Ukuba i-jQuery ifunyenwe, i-Bootstrap izakukhupha iziganeko enkosi kwisixokelelwano somsitho wejQuery. Ke ukuba ufuna ukumamela iziganeko zeBootstrap, kuyakufuneka usebenzise iindlela zejQuery ( .on
, .one
) endaweni ye addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Programmatic API
Bonke abakhi bamkela into ekhethiweyo yeenketho okanye akukho nto (eqalisa iplagin ngokuziphatha kwayo okungagqibekanga):
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
Ukuba ungathanda ukufumana umzekelo weplagin ethile, iplagin nganye iveza getInstance
indlela. Ukuze uyifumane ngokuthe ngqo kwinto, yenza oku: bootstrap.Popover.getInstance(myPopoverEl)
.
Abakhethi beCSS kubakhi
Ungasebenzisa kwakhona umkhethi we-CSS njengengxoxo yokuqala endaweni yesiqalelo se-DOM ukuqalisa iplagi. Okwangoku into yeplagin ifunyanwa querySelector
yindlela kuba iiplagi zethu zixhasa into enye kuphela.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Imisebenzi yeAsynchronous kunye notshintsho
Zonke iindlela zeprogram ye-API zi -asynchronous kwaye zibuyela kumnxeba xa utshintsho luqalisiwe kodwa ngaphambi kokuba luphele .
Ukuze wenze isenzo xa utshintsho lugqityiwe, ungamamela isiganeko esihambelanayo.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Ukongeza umnxeba wendlela kwicandelo lotshintsho awuyi kuhoywa .
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 !!
Useto oluhlala lukhona
Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.Default
into yeplagin:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Akukho ngquzulwano (kuphela ukuba usebenzisa i-jQuery)
Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflict
ungafowunela iplagin onqwenela ukubuyisela ixabiso layo.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Amanani enguqulelo
Uguqulelo lweplagi nganye yeBootstrap inokufumaneka VERSION
ngepropathi yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:
bootstrap.Tooltip.VERSION // => "5.0.2"
Akukho mpazamo zikhethekileyo xa iJavaScript ivaliwe
Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>
ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.
Amathala eencwadi eqela lesithathu
I-Bootstrap ayizixhasi ngokusemthethweni iilayibrari zeJavaScript zomntu wesithathu njengePrototype okanye i-jQuery UI. Ngaphandle .noConflict
kweziganeko ezinamagama, kusenokubakho iingxaki zokuhambelana ekufuneka uzilungise wedwa.
Isicoci
Iingcebiso zezixhobo kunye neePopovers zisebenzisa isicoci esakhelwe ngaphakathi ukucoca iinketho ezamkela iHTML.
Ixabiso elimiselweyo allowList
lilandelayo:
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: []
}
Ukuba ufuna ukongeza amaxabiso amatsha koku kungagqibekanga allowList
ungenza oku kulandelayo:
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)
Ukuba ufuna ukudlula kwi-sanitizer yethu kuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo, umzekelo DOMpurify , kuya kufuneka wenze oku kulandelayo:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})