JavaScript
Atdzīviniet Bootstrap, izmantojot mūsu izvēles JavaScript spraudņus. Uzziniet par katru spraudni, mūsu datu un programmatiskās API opcijām un daudz ko citu.
Individuāli vai apkopoti
Spraudņus var iekļaut atsevišķi (izmantojot Bootstrap individuālo js/dist/*.js
), vai visus uzreiz, izmantojot bootstrap.js
vai samazinātu bootstrap.min.js
(neietveriet abus).
Ja izmantojat komplektētāju (Webpack, Rollup…), varat izmantot /js/dist/*.js
failus, kas ir gatavi UMD.
Bootstrap izmantošana kā modulis
Mēs piedāvājam Bootstrap versiju, kas izveidota kā ESM
( bootstrap.esm.js
un bootstrap.esm.min.js
), kas ļauj izmantot Bootstrap kā moduli jūsu pārlūkprogrammā, ja jūsu atlasītās pārlūkprogrammas to atbalsta .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Nesaderīgi spraudņi
Pārlūkprogrammas ierobežojumu dēļ dažus mūsu spraudņus, proti, nolaižamās izvēlnes, rīka padoma un popover spraudņus, nevar izmantot <script>
tagā ar module
veidu, jo tie ir atkarīgi no Popper. Plašāku informāciju par problēmu skatiet šeit .
Atkarības
Daži spraudņi un CSS komponenti ir atkarīgi no citiem spraudņiem. Ja spraudņus iekļaujat atsevišķi, noteikti pārbaudiet, vai dokumentos nav šīs atkarības.
Mūsu nolaižamās izvēlnes, uznirstošie logi un rīka padomi ir atkarīgi arī no Popper .
Vai joprojām vēlaties izmantot jQuery? Tas ir iespējams!
Bootstrap 5 ir paredzēts lietošanai bez jQuery, taču joprojām ir iespējams izmantot mūsu komponentus ar jQuery. Ja Bootstrap objektā konstatē jQuery
,window
tas pievienos visus mūsu komponentus jQuery spraudņu sistēmā; tas nozīmē, ka varēsit $('[data-bs-toggle="tooltip"]').tooltip()
iespējot rīka padomus. Tas pats attiecas uz citām mūsu sastāvdaļām.
Datu atribūti
Gandrīz visus Bootstrap spraudņus var iespējot un konfigurēt, izmantojot tikai HTML ar datu atribūtiem (mūsu vēlamais JavaScript funkcionalitātes izmantošanas veids). Noteikti izmantojiet tikai vienu datu atribūtu kopu vienam elementam (piemēram, jūs nevarat aktivizēt rīka padomu un modālu no vienas pogas).
Atlasītāji
Pašlaik DOM elementu vaicāšanai mēs izmantojam vietējās metodes querySelector
un querySelectorAll
veiktspējas nolūkos, tāpēc jums ir jāizmanto derīgi atlasītāji . Ja izmantojat, piemēram, īpašus selektorus: collapse:Example
noteikti izvairieties no tiem.
Pasākumi
Bootstrap nodrošina pielāgotus notikumus lielākajai daļai spraudņu unikālo darbību. Parasti tie ir infinitīva un pagātnes divdabja formā — kur infinitīvs (piem. show
) tiek aktivizēts notikuma sākumā, bet tā pagātnes divdabja forma (piem. shown
) tiek aktivizēta pēc darbības pabeigšanas.
Visi infinitīvie notikumi nodrošina preventDefault()
funkcionalitāti. Tas nodrošina iespēju apturēt darbības izpildi pirms tās sākšanas. Atgriežot false no notikumu apstrādātāja, automātiski tiks izsaukts arī preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
jQuery notikumi
Bootstrap noteiks jQuery jQuery
, ja objektā ir window
un nav data-bs-no-jquery
iestatīts neviens atribūts <body>
. Ja jQuery tiek atrasts, Bootstrap izdos notikumus, pateicoties jQuery notikumu sistēmai. Tātad, ja vēlaties klausīties Bootstrap notikumus, jums būs jāizmanto jQuery metodes ( .on
, .one
), nevis addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Programmatiskā API
Visi konstruktori pieņem izvēles opciju objektu vai neko (kas iniciē spraudni ar tā noklusējuma darbību):
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
Ja vēlaties iegūt konkrētu spraudņa instanci, katrs spraudnis atklāj getInstance
metodi. Lai to izgūtu tieši no elementa, rīkojieties šādi: bootstrap.Popover.getInstance(myPopoverEl)
.
CSS atlasītāji konstruktoros
Varat arī izmantot CSS atlasītāju kā pirmo argumentu, nevis DOM elementu, lai inicializētu spraudni. Pašlaik spraudņa elements tiek atrasts ar querySelector
metodi, jo mūsu spraudņi atbalsta tikai vienu elementu.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Asinhronās funkcijas un pārejas
Visas programmatiskās API metodes ir asinhronas un atgriežas pie zvanītāja, kad pāreja ir sākta, bet pirms tās beigām .
Lai veiktu darbību, kad pāreja ir pabeigta, varat noklausīties atbilstošo notikumu.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .
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 !!
Noklusējuma iestatījumi
Varat mainīt spraudņa noklusējuma iestatījumus, modificējot spraudņa Constructor.Default
objektu:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Nav konfliktu (tikai tad, ja izmantojat jQuery)
Dažreiz ir nepieciešams izmantot Bootstrap spraudņus ar citiem lietotāja interfeisa ietvariem. Šādos apstākļos dažkārt var rasties nosaukumtelpas sadursmes. Ja tā notiek, varat izsaukt .noConflict
spraudni, kura vērtību vēlaties atjaunot.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Versiju numuri
Katra Bootstrap spraudņa versijai var piekļūt, izmantojot VERSION
spraudņa konstruktora īpašumu. Piemēram, rīka padoma spraudnim:
bootstrap.Tooltip.VERSION // => "5.0.2"
Nav īpašu atkāpšanās gadījumu, ja JavaScript ir atspējots
Bootstrap spraudņi nav īpaši graciozi, ja JavaScript ir atspējots. Ja jums rūp lietotāja pieredze šajā gadījumā, izmantojiet <noscript>
, lai izskaidrotu situāciju (un kā atkārtoti iespējot JavaScript) saviem lietotājiem un/vai pievienojiet savus pielāgotos atkāpšanās variantus.
Trešo pušu bibliotēkas
Bootstrap oficiāli neatbalsta trešo pušu JavaScript bibliotēkas , piemēram, Prototype vai jQuery UI. Neskatoties uz .noConflict
nosaukumiem sadalītiem notikumiem, var rasties saderības problēmas, kas jums ir jānovērš pašam.
Dezinficētājs
Rīka padomi un uznirstošie elementi izmanto mūsu iebūvēto dezinfekcijas līdzekli, lai dezinficētu opcijas, kas pieņem HTML.
Noklusējuma allowList
vērtība ir šāda:
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: []
}
Ja šim noklusējumam vēlaties pievienot jaunas vērtības, allowList
varat rīkoties šādi:
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)
Ja vēlaties apiet mūsu dezinfekcijas līdzekli, jo vēlaties izmantot īpašu bibliotēku, piemēram , DOMpurify , rīkojieties šādi:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})