Javascript
Fa'aola Bootstrap i la matou fa'apipi'i JavaScript. A'oa'o e uiga i mea fa'apipi'i ta'itasi, a matou fa'amaumauga ma polokalame API filifiliga, ma isi mea.
Ta'ito'atasi pe tuufaatasia
E mafai ona fa'apipi'i fa'apipi'i ta'ito'atasi (fa'aaogā le tagata ta'ito'atasi a Bootstrap js/dist/*.js
), po'o fa'aaoga uma i le taimi e tasi bootstrap.js
po'o le fa'aitiitiga bootstrap.min.js
(aua le aofia uma).
Afai e te faʻaogaina se fusi (Webpack, Rollup…), e mafai ona e faʻaogaina /js/dist/*.js
faila ua saunia UMD.
Faʻaaogaina Bootstrap o se module
Matou te tuʻuina atu se faʻataʻitaʻiga o Bootstrap fausia e pei o ESM
( bootstrap.esm.js
ma bootstrap.esm.min.js
) e faʻatagaina oe e faʻaaoga Bootstrap o se module i lau suʻesuʻega, pe a lagolagoina e au suʻesuʻega faʻatatau .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
plugins le fetaui
Ona o tapula'a o su'esu'ega, e le mafai ona fa'aogaina nisi oa matou plugini, e ta'ua o le Dropdown, Tooltip ma Popover, i se fa'ailoga <script>
ma le module
ituaiga ona e fa'alagolago i Popper. Mo nisi faʻamatalaga e uiga i le mataupu vaʻai iinei .
Fa'alagolago
O nisi fa'apipi'i ma vaega CSS fa'alagolago i isi fa'apipi'i. Afai e te faʻapipiʻi faʻapipiʻi taʻitasi, ia mautinoa e siaki mo nei faʻalagolago i le docs.
E fa'alagolago fo'i a matou pa'u, popovers ma meafaigaluega i Popper .
E mana'o pea e fa'aoga le jQuery? E mafai!
Bootstrap 5 ua mamanuina e faʻaoga e aunoa ma le jQuery, ae e mafai lava ona faʻaoga a tatou vaega i le jQuery. Afai e iloa e Bootstrap jQuery
i totonu o le window
mea faitino o le a faʻaopoopoina uma a tatou vaega ile polokalama faʻapipiʻi a le jQuery; o lona uiga e mafai ona e faia $('[data-bs-toggle="tooltip"]').tooltip()
ina ia mafai ai meafaigaluega. E faapena foi i isi a tatou vaega.
Uiga fa'amaumauga
Toeitiiti lava o Bootstrap plugins e mafai ona faʻaogaina ma faʻapipiʻi e ala ile HTML naʻo faʻatasi ai ma faʻamatalaga uiga (o la tatou auala sili e faʻaogaina ai le JavaScript). Ia mautinoa e naʻo le tasi le seti o faʻamatalaga uiga i luga o se elemene e tasi (faʻataʻitaʻiga, e le mafai ona e faʻaosoina se meafaigaluega ma auala mai le ki lava e tasi.)
Tagata filifilia
I le taimi nei e fesiligia elemene DOM matou te faʻaogaina metotia faʻale-aganuʻu querySelector
ma querySelectorAll
mo mafuaʻaga o faʻatinoga, o lea e tatau ai ona e faʻaogaina tagata filifilia . Afai e te fa'aogaina tagata filifilia fa'apitoa, mo se fa'ata'ita'iga: collapse:Example
ia mautinoa e sola ese mai ai.
Mea na tutupu
O le Bootstrap e tuʻuina atu mea faʻapitoa mo le tele o mea faʻapitoa a plugins. E masani lava, o nei mea e sau i se fa'ailoga fa'apitoa ma le taimi ua tuana'i - lea e fa'aosoina ai le infinitive (ex. show
) i le amataga o se mea na tupu, ma lona fa'ailoga participle ua mavae (ex. shown
) e fa'aosoina pe a mae'a se gaioiga.
O mea fa'apitoa uma e maua ai preventDefault()
galuega fa'atino. O lenei mea e maua ai le malosi e taofi ai le faʻatinoina o se gaioiga aʻo leʻi amataina. O le toe fa'afo'i sese mai se tagata e fa'atino mea na tupu e otometi fo'i ona vala'au preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jQuery mea tutupu
Bootstrap o le a iloa le jQuery pe afai jQuery
o loʻo i ai i totonu o le window
mea ma e leai se data-bs-no-jquery
uiga faʻapipiʻi ile <body>
. Afai e maua le jQuery, Bootstrap o le a faʻaalia mea faʻafetai i le jQuery's event system. O lea afai e te manaʻo e faʻalogo i mea na tutupu a Bootstrap, e tatau ona e faʻaogaina auala jQuery ( .on
, .one
) nai lo le addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
API polokalame
E talia uma e le au faufale se mea e filifili pe leai se mea (lea e amataina ai se faʻapipiʻi ma ana amioga le lelei):
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
Afai e te manaʻo e maua se faʻataʻitaʻiga faʻapitoa, e faʻaalia e faʻapipiʻi taʻitasi se getInstance
metotia. Ina ia toe aumai sa'o mai se elemene, fai le mea lenei: bootstrap.Popover.getInstance(myPopoverEl)
.
CSS filifilia i tagata faufale
E mafai foʻi ona e faʻaogaina se CSS filifilia e fai ma finauga muamua nai lo se elemene DOM e amata ai le plugin. O le taimi nei o le elemene mo le faʻapipiʻi e maua i le querySelector
auala talu ai o matou plugins e lagolagoina naʻo se elemene e tasi.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Gaioiga asynchronous ma suiga
O metotia API fa'apolokalame uma e le fetaui ma toe fo'i i le tagata vala'au pe a amata le suiga ae le'i uma .
Ina ia mafai ona faʻatino se gaioiga pe a maeʻa le suiga, e mafai ona e faʻalogo i le mea na tupu.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
E le gata i lea, o le a le amana'ia se auala e valaau ai i se vaega o suiga .
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 !!
Fa'atonuga
E mafai ona e suia tulaga fa'aletonu mo se fa'apipi'i e ala i le suia o le Constructor.Default
mea fa'apipi'i:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Leai se feteenaiga (naʻo pe a e faʻaogaina le jQuery)
O nisi taimi e manaʻomia le faʻaogaina o Bootstrap plugins ma isi faʻavae UI. I ia tulaga, e mafai ona tupu i nisi taimi le fete'ena'iga o igoa. Afai e tupu lenei mea, e mafai ona e valaʻau .noConflict
i le plugin e te manaʻo e toe faʻafoʻi le tau o.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Numera fa'aliliuga
O le fa'asologa o fa'apipi'i ta'itasi a Bootstrap e mafai ona fa'aogaina e ala i le VERSION
meatotino a le faufale a le plugin. Mo se faʻataʻitaʻiga, mo le meafaigaluega faʻapipiʻi:
bootstrap.Tooltip.VERSION // => "5.0.2"
Leai ni fa'aletonu fa'apitoa pe a fa'aletonu le JavaScript
O plugini a Bootstrap e le toe fo'i fa'apitoa pe a fa'aletonu le JavaScript. Afai e te popole e uiga i le tagata faʻaoga i lenei tulaga, faʻaaoga <noscript>
e faʻamatala ai le tulaga (ma pe faʻafefea ona toe faʻaogaina le JavaScript) i au tagata faʻaoga, ma / pe faʻaopoopo au lava faʻaleaga masani.
Faletusi vaega lona tolu
E le lagolagoina aloaia e Bootstrap faletusi JavaScript isi vaega e pei o le Prototype poʻo le jQuery UI. E ui lava .noConflict
ma fa'aigoa mea tutupu, e ono iai fa'afitauli feso'ota'iga e mana'omia ona e fa'aleleia e oe lava.
Sanitizer
Tooltips ma Popovers e fa'aogaina le matou fa'amama fa'afale e fa'amama ai filifiliga e talia HTML.
O le tau fa'aletonu allowList
o mea nei:
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: []
}
Afai e te manaʻo e faʻaopoopo ni tau fou i lenei faaletonu allowList
e mafai ona e faia mea nei:
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)
Afai e te manaʻo e faʻamalo le matou sanitizer ona e te manaʻo e faʻaoga se faletusi faʻapitoa, mo se faʻataʻitaʻiga DOMpurify , e tatau ona e faia mea nei:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})