JavaScript
Oživite Bootstrap z našimi izbirnimi vtičniki JavaScript. Izvedite več o vsakem vtičniku, naših podatkovnih in programskih možnostih API-ja in več.
Posamezno ali sestavljeno
Vtičnike je mogoče vključiti posamično (z uporabo individualnega Bootstrapa js/dist/*.js
) ali vse naenkrat z uporabo bootstrap.js
ali pomanjšanim bootstrap.min.js
(ne vključujte obojega).
Če uporabljate povezovalnik (Webpack, Rollup ...), lahko uporabite /js/dist/*.js
datoteke, ki so pripravljene za UMD.
Uporaba Bootstrapa kot modula
Ponujamo različico Bootstrapa, zgrajeno kot ESM
( bootstrap.esm.js
in bootstrap.esm.min.js
), ki vam omogoča uporabo Bootstrapa kot modula v vašem brskalniku, če to podpirajo vaši ciljni brskalniki .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Nezdružljivi vtičniki
Zaradi omejitev brskalnika nekaterih naših vtičnikov, in sicer vtičnikov Dropdown, Tooltip in Popover, ni mogoče uporabiti v <script>
oznaki s module
tipom, ker so odvisni od Popperja. Za več informacij o vprašanju glejte tukaj .
Odvisnosti
Nekateri vtičniki in komponente CSS so odvisni od drugih vtičnikov. Če dodate vtičnike posamično, preverite te odvisnosti v dokumentih.
Naši spustni meniji, pojavna okna in namigi orodij so prav tako odvisni od Popperja .
Še vedno želite uporabljati jQuery? Mogoče je!
Bootstrap 5 je zasnovan za uporabo brez jQuery, vendar je še vedno mogoče uporabljati naše komponente z jQuery. Če Bootstrap zazna jQuery
predmetwindow
, bo dodal vse naše komponente v sistem vtičnikov jQuery; to pomeni, da boste lahko storili, $('[data-bs-toggle="tooltip"]').tooltip()
da omogočite namige orodij. Enako velja za naše druge komponente.
Atributi podatkov
Skoraj vse vtičnike Bootstrap je mogoče omogočiti in konfigurirati samo prek HTML s podatkovnimi atributi (naš najprimernejši način uporabe funkcionalnosti JavaScript). Prepričajte se, da uporabljate samo en nabor podatkovnih atributov na posameznem elementu (npr. ne morete sprožiti namiga orodja in modala z istega gumba.)
Selektorji
Trenutno za poizvedovanje elementov DOM uporabljamo izvorne metode querySelector
in querySelectorAll
zaradi zmogljivosti, zato morate uporabiti veljavne izbirnike . Če uporabljate posebne izbirnike, na primer: collapse:Example
ne pozabite jim uiti.
Dogodki
Bootstrap ponuja dogodke po meri za večino edinstvenih dejanj vtičnikov. Na splošno so ti v obliki nedoločnika in deležnika preteklosti – kjer se nedoločnik (npr. show
) sproži na začetku dogodka, njegova oblika deležnika preteklosti (npr. shown
) pa se sproži ob zaključku dejanja.
Vsi nedoločni dogodki zagotavljajo preventDefault()
funkcionalnost. To omogoča, da zaustavite izvajanje dejanja, preden se začne. Če obravnavalec dogodkov vrne false, bo tudi samodejno poklical preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
dogodki jQuery
Bootstrap bo zaznal jQuery, če jQuery
je prisoten v window
objektu in ni nastavljen noben data-bs-no-jquery
atribut <body>
. Če najde jQuery, bo Bootstrap oddal dogodke zahvaljujoč sistemu dogodkov jQuery. Torej, če želite poslušati dogodke Bootstrapa, boste morali uporabiti metode jQuery ( .on
, .one
) namesto addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Programski API
Vsi konstruktorji sprejmejo izbirni objekt možnosti ali nič (kar sproži vtičnik s privzetim vedenjem):
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
Če želite dobiti določen primerek vtičnika, vsak vtičnik izpostavi getInstance
metodo. Če ga želite pridobiti neposredno iz elementa, naredite to: bootstrap.Popover.getInstance(myPopoverEl)
.
Selektorji CSS v konstruktorjih
Za inicializacijo vtičnika lahko uporabite tudi izbirnik CSS kot prvi argument namesto elementa DOM. Trenutno se element za vtičnik najde z querySelector
metodo, saj naši vtičniki podpirajo samo en element.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Asinhrone funkcije in prehodi
Vse programske metode API so asinhrone in se vrnejo klicatelju, ko se prehod začne, vendar preden se konča .
Če želite izvesti dejanje, ko je prehod končan, lahko poslušate ustrezen dogodek.
var myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Poleg tega bo prezrt klic metode prehodne komponente .
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 !!
Privzete nastavitve
Privzete nastavitve za vtičnik lahko spremenite tako, da spremenite predmet vtičnika Constructor.Default
:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Brez spora (samo če uporabljate jQuery)
Včasih je treba uporabiti vtičnike Bootstrap z drugimi okviri uporabniškega vmesnika. V teh okoliščinah lahko občasno pride do kolizij imenskega prostora. Če se to zgodi, lahko pokličete .noConflict
vtičnik, katerega vrednost želite razveljaviti.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Številke različic
Do različice vsakega vtičnika Bootstrap je mogoče dostopati prek VERSION
lastnosti konstruktorja vtičnika. Na primer za vtičnik orodnih namigov:
bootstrap.Tooltip.VERSION // => "5.0.2"
Ni posebnih nadomestnih možnosti, ko je JavaScript onemogočen
Bootstrapovi vtičniki se ne vrnejo posebej elegantno, ko je JavaScript onemogočen. Če vam je mar za uporabniško izkušnjo v tem primeru, uporabite, <noscript>
da svojim uporabnikom pojasnite situacijo (in kako znova omogočiti JavaScript) in/ali dodajte lastne nadomestne možnosti po meri.
Knjižnice tretjih oseb
Bootstrap uradno ne podpira knjižnic JavaScript tretjih oseb, kot sta Prototype ali jQuery UI. Kljub .noConflict
dogodkom in imenskim prostorom lahko pride do težav z združljivostjo, ki jih morate odpraviti sami.
Razkužilo
Namigi orodij in pojavni elementi uporabljajo naš vgrajeni čistilec za čiščenje možnosti, ki sprejemajo HTML.
Privzeta allowList
vrednost je naslednja:
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: []
}
Če želite tej privzeti vrednosti dodati nove vrednosti allowList
, lahko storite naslednje:
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)
Če želite zaobiti naš sanitizer, ker raje uporabljate namensko knjižnico, na primer DOMPurify , storite naslednje:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})