JavaSkript
Bring Bootstrap ta libben mei ús opsjonele JavaScript-plugins. Learje oer elke plugin, ús gegevens en programmatyske API-opsjes, en mear.
Yndividueel of gearstald
Ynstekkers kinne yndividueel opnommen wurde (mei it yndividu fan Bootstrap js/dist/*.js
), of allegear tagelyk mei bootstrap.js
of de minifisearre bootstrap.min.js
(befette beide net).
As jo in bondel brûke (Webpack, Rollup ...), kinne jo /js/dist/*.js
bestannen brûke dy't UMD klear binne.
Mei help fan Bootstrap as module
Wy leverje in ferzje fan Bootstrap boud as ESM
( bootstrap.esm.js
en bootstrap.esm.min.js
) wêrmei jo Bootstrap kinne brûke as module yn jo browser, as jo rjochte browsers it stypje .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Ynkompatibele plugins
Fanwegen browserbeperkingen kinne guon fan ús plugins, nammentlik Dropdown, Tooltip en Popover plugins, net brûkt wurde yn in <script>
tag mei module
type, om't se ôfhinklik binne fan Popper. Foar mear ynformaasje oer it probleem sjoch hjir .
Ofhinklikens
Guon plugins en CSS-komponinten binne ôfhinklik fan oare plugins. As jo plugins yndividueel opnimme, soargje derfoar dat jo dizze ôfhinklikens kontrolearje yn 'e dokuminten.
Us dropdowns, popovers en tooltips binne ek ôfhinklik fan Popper .
Wolle jo jQuery noch brûke? It is mooglik!
Bootstrap 5 is ûntworpen om te brûken sûnder jQuery, mar it is noch altyd mooglik om ús komponinten te brûken mei jQuery. As Bootstrap detektearret jQuery
yn it window
objekt , sil it al ús komponinten tafoegje yn it plugin-systeem fan jQuery; dit betsjut dat jo kinne dwaan $('[data-bs-toggle="tooltip"]').tooltip()
om tooltips yn te skeakeljen. Itselde jildt foar ús oare komponinten.
Data attributen
Hast alle Bootstrap-plugins kinne wurde ynskeakele en konfigureare fia HTML allinich mei gegevensattributen (ús foarkommende manier om JavaScript-funksjonaliteit te brûken). Wês der wis fan dat jo mar ien set gegevensattributen brûke op ien elemint (jo kinne bygelyks gjin tooltip en modaal fan deselde knop oansette.)
Selektors
Op it stuit om DOM-eleminten te freegjen brûke wy de native metoaden querySelector
en querySelectorAll
foar prestaasjesredenen, dus jo moatte jildige selectors brûke . As jo bygelyks spesjale selectors brûke: collapse:Example
wês wis dat jo se ûntkomme.
Eveneminten
Bootstrap leveret oanpaste eveneminten foar de unike aksjes fan de measte plugins. Yn 't algemien komme dizze yn in ynfinityf en doedestiidsfoarm - wêrby't de ynfinityf (bgl. show
) oan it begjin fan in barren ynskeakele wurdt, en syn doetiidsfoarm (bgl. shown
) wurdt aktivearre by it foltôgjen fan in aksje.
Alle infinitive eveneminten jouwe preventDefault()
funksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint. It werombringen fan falsk fan in evenemintehanneler sil ek automatysk oproppe preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jQuery eveneminten
Bootstrap sil detect jQuery as jQuery
is oanwêzich yn it window
foarwerp en der is gjin data-bs-no-jquery
attribút ynsteld op <body>
. As jQuery wurdt fûn, sil Bootstrap eveneminten útstjoere troch it evenemintsysteem fan jQuery. Dus as jo nei de eveneminten fan Bootstrap harkje wolle, moatte jo de jQuery-metoaden ( .on
, .one
) brûke ynstee fan addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Programmatyske API
Alle konstruktors akseptearje in opsjoneel opsjeobjekt of neat (wat in plugin inisjearret mei syn standertgedrach):
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
As jo in bepaalde plugin-eksimplaar wolle krije, sil elke plugin in getInstance
metoade bleatstelle. Om it direkt fan in elemint op te heljen, dwaan dit: bootstrap.Popover.getInstance(myPopoverEl)
.
CSS-selektors yn konstruktors
Jo kinne ek in CSS-selektor brûke as it earste argumint ynstee fan in DOM-elemint om it plugin te inisjalisearjen. Op it stuit wurdt it elemint foar de plugin fûn troch de querySelector
metoade, om't ús plugins allinich ien elemint stypje.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Asynchrone funksjes en transysjes
Alle programmatyske API-metoaden binne asynchrone en geane werom nei de beller as de oergong is begon, mar foardat it einiget .
Om in aksje út te fieren as de oergong foltôge is, kinne jo harkje nei it korrespondearjende evenemint.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .
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 !!
Standertynstellings
Jo kinne de standertynstellingen foar in plugin feroarje troch it Constructor.Default
objekt fan 'e plugin te feroarjen:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Gjin konflikt (allinich as jo jQuery brûke)
Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflict
de plugin oanroppe wêrfan jo de wearde weromsette wolle.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Ferzje nûmers
De ferzje fan elk fan Bootstrap's plugins kin tagonklik wurde fia it VERSION
eigendom fan 'e plugin's constructor. Bygelyks foar de tooltip-plugin:
bootstrap.Tooltip.VERSION // => "5.0.2"
Gjin spesjale fallbacks as JavaScript is útskeakele
De plugins fan Bootstrap falle net bysûnder sierlik werom as JavaScript is útskeakele. As jo yn dit gefal soarch hawwe oer de brûkersûnderfining, brûk <noscript>
dan om de situaasje (en hoe't jo JavaScript opnij ynskeakelje kinne) oan jo brûkers út te lizzen, en/of jo eigen oanpaste fallbacks ta te foegjen.
Tredde bibleteken
Bootstrap stipet gjin offisjeel JavaScript-biblioteken fan tredden lykas Prototype of jQuery UI. Nettsjinsteande .noConflict
barrens mei nammen, kinne d'r kompatibiliteitsproblemen wêze dy't jo sels moatte reparearje.
Sanitizer
Tooltips en Popovers brûke ús ynboude sanitizer om opsjes te sanearjen dy't HTML akseptearje.
De standertwearde allowList
is de folgjende:
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: []
}
As jo nije wearden taheakje wolle oan dizze standert allowList
kinne jo it folgjende dwaan:
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)
As jo ús sanitizer wolle omgean om't jo leaver in tawijd bibleteek brûke, bygelyks DOMPurify , moatte jo it folgjende dwaan:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})