JavaScript
Leeta Bootstrap mu bulamu ne JavaScript plugins zaffe ez'okwesalirawo. Manya ebikwata ku buli plugin, data yaffe ne programmatic API options, n'ebirala.
Kinoomu oba ekikuŋŋaanyiziddwa
Plugins zisobola okuteekebwamu kinnoomu (nga okozesa Bootstrap's individual js/dist/*.js
), oba zonna omulundi gumu nga okozesa bootstrap.js
oba ezikendeezeddwa bootstrap.min.js
(tossaamu byombi).
Bw’oba okozesa bundler (Webpack, Rollup...), osobola okukozesa /js/dist/*.js
fayiro eziri nga zeetegefu UMD.
Okukozesa Bootstrap nga module
Tuwa enkyusa ya Bootstrap ezimbiddwa nga ESM
( bootstrap.esm.js
ne bootstrap.esm.min.js
) ekusobozesa okukozesa Bootstrap nga module mu browser yo, singa browser zo z'ogenderera zigiwagira .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Plugins ezitakwatagana
Olw’obuzibu bwa browser, ezimu ku plugins zaffe, kwe kugamba Dropdown, Tooltip ne Popover plugins, teziyinza kukozesebwa mu <script>
tag eriko module
type kubanga zeesigamye ku Popper. Ebisingawo ku nsonga eno laba wano .
Ebisinziirwako
Plugins ezimu n'ebitundu bya CSS byesigamye ku plugins endala. Bw'oba ossaamu plugins kinnoomu, kakasa nti okebera bino ebisinziirako mu docs.
Ebintu byaffe ebigwa wansi, popovers n'ebikozesebwa nabyo bisinziira ku Popper .
Okyayagala okukozesa jQuery? Kisoboka!
Bootstrap 5 ekoleddwa okukozesebwa awatali jQuery, naye kikyasoboka okukozesa ebitundu byaffe ne jQuery. Singa Bootstrap ezuula jQuery
mu window
kintu ejja kwongerako ebitundu byaffe byonna mu nkola ya jQuery eya plugin; kino kitegeeza nti ojja kusobola okukola $('[data-bs-toggle="tooltip"]').tooltip()
okusobozesa obukodyo bw'ebikozesebwa. Bwe kityo bwe kiri ne ku bitundu byaffe ebirala.
Ebintu ebikwata ku data
Kumpi plugins zonna eza Bootstrap zisobola okusobozesa n’okusengekebwa okuyita mu HTML yokka nga zirina data attributes (engeri gye twagala okukozesaamu enkola ya JavaScript). Kakasa nti okozesa ekibinja kimu kyokka eky'ebintu bya data ku elementi emu (okugeza, tosobola kutandika tooltip ne modal okuva ku button y'emu.)
Abasunsula
Mu kiseera kino okubuuza ebintu bya DOM tukozesa enkola enzaaliranwa querySelector
era querySelectorAll
olw'ensonga z'okukola, kale olina okukozesa ebisunsula ebituufu . Bw’oba okozesa ebisunsula eby’enjawulo, okugeza: collapse:Example
kakasa nti obitolose.
Ebibaddewo
Bootstrap egaba ebibaddewo eby'enjawulo ku bikolwa eby'enjawulo ebya plugins ebisinga obungi. Okutwalira awamu, bino bijja mu ngeri etaliiko nkomerero n’ennyiriri eziyise - nga ekintu ekitaliiko nkomerero (ex. show
) kitandikibwawo ku ntandikwa y’ekintu ekibaawo, ate engeri yaakyo ey’ekitundu ekiyise (ex. shown
) n’etandika nga ekikolwa kiwedde.
Ebintu byonna ebibaawo ebitaliiko nkomerero biwa preventDefault()
enkola. Kino kiwa obusobozi okuyimiriza okukola ekikolwa nga tekinnatandika. Okuzzaayo false okuva ku event handler nakyo kijja kuyita otomatika preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jEbibaawo mu kubuuza
Bootstrap ejja kuzuula jQuery singa jQuery
ebaawo mu window
kintu era nga tewali data-bs-no-jquery
attribute eteekeddwa ku <body>
. Singa jQuery esangibwa, Bootstrap ejja kufulumya ebibaddewo olw'enkola y'ebibaddewo eya jQuery. Kale bw'oba oyagala okuwuliriza ebibaawo mu Bootstrap, ojja kuba olina okukozesa enkola za jQuery ( .on
, .one
) mu kifo kya addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
API ya pulogulaamu
Abazimbi bonna bakkiriza ekintu eky'okulonda eky'okwesalirawo oba tewali kintu kyonna (ekitandika plugin n'enneeyisa yaayo eya bulijjo):
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
Bw’oba oyagala okufuna ekifaananyi kya plugin ekimu, buli plugin eraga getInstance
enkola. Okusobola okugiggya butereevu mu elementi, kola kino: bootstrap.Popover.getInstance(myPopoverEl)
.
Ebilonda bya CSS mu bizimbisibwa
Osobola n'okukozesa ekisunsula CSS nga ensonga esooka mu kifo ky'ekintu kya DOM okutandikawo plugin. Mu kiseera kino elementi ya plugin esangibwa mu querySelector
nkola okuva plugins zaffe bwe ziwagira element emu yokka.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Emirimu egitakwatagana n’enkyukakyuka
Enkola zonna eza programmatic API zibeera za asynchronous era zidda eri oyo ayita oluvannyuma lw'enkyukakyuka okutandika naye nga tennaggwa .
Okusobola okukola ekikolwa ng’enkyukakyuka ewedde, osobola okuwuliriza ekintu ekikwatagana.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Okugatta ku ekyo okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .
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 !!
Enteekateeka ezisookerwako
Osobola okukyusa ensengeka ezisookerwako eza plugin nga okyusa Constructor.Default
ekintu kya plugin:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Tewali butakkaanya (bw'okozesa jQuery yokka)
Oluusi kyetaagisa okukozesa Bootstrap plugins ne UI frameworks endala. Mu mbeera zino, okutomeragana kw'ekifo ky'amannya kuyinza okubaawo oluusi n'oluusi. Kino bwe kibaawo, oyinza okuyita .noConflict
ku plugin gy’oyagala okuzzaawo omuwendo gwayo.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Ennamba z’enkyusa
Enkyusa ya buli emu ku plugins za Bootstrap esobola okuyingizibwa ng'oyita mu VERSION
kintu ky'omuzimbi wa plugin. Okugeza, ku plugin ya tooltip:
bootstrap.Tooltip.VERSION // => "5.0.2"
Tewali kugwa kwa njawulo nga JavaScript eremeddwa
Bootstrap's plugins tezigwa mabega naddala gracefully nga JavaScript eremeddwa. Bw’oba ofaayo ku bumanyirivu bw’omukozesa mu mbeera eno, kozesa <noscript>
okunnyonnyola embeera (n’engeri y’okuddamu okusobozesa JavaScript) eri abakozesa bo, ne/oba okwongerako ebikuddirira byo eby’ennono.
Amaterekero g’ebitabo ag’abantu ab’okusatu
Bootstrap tewagira mu butongole tterekero lya JavaScript ery'ekibiina eky'okusatu nga Prototype oba jQuery UI. Wadde nga waliwo .noConflict
ebibaddewo nga biteekeddwa mu kifo ky’amannya, wayinza okubaawo ebizibu by’okukwatagana by’olina okutereeza ku bubwo.
Eddagala erirongoosa
Tooltips ne Popovers zikozesa sanitizer yaffe ezimbiddwa mu sanitize options ezikkiriza HTML.
Omuwendo ogusookerwako allowList
gwe guno wammanga:
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: []
}
Bw'oba oyagala okwongera emiwendo emipya ku kino ekisookerwako allowList
osobola okukola bino wammanga:
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)
Bw’oba oyagala okuyita ku sanitizer yaffe kubanga oyagala nnyo okukozesa etterekero ly’ebitabo eriweereddwayo, okugeza DOMPurify , olina okukola bino wammanga:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})