JavaScript
Keltse életre a Bootstrapet a jQuery-re épített opcionális JavaScript-bővítményeinkkel. Tudjon meg többet az egyes beépülő modulokról, adat- és programozási API-lehetőségeinkről és még sok másról.
A beépülő modulok beépíthetők külön-külön (a Bootstrap egyéni használatával js/dist/*.js
), vagy egyszerre, bootstrap.js
vagy a kicsinyített változat használatával bootstrap.min.js
(ne tartalmazza mindkettőt).
Ha kötegelőt (Webpack, Rollup…) használ, akkor /js/dist/*.js
UMD-kompatibilis fájlokat is használhat.
Egyes bővítmények és CSS-összetevők más beépülő moduloktól függenek. Ha a beépülő modulokat külön-külön is felveszi, feltétlenül ellenőrizze ezeket a függőségeket a dokumentumokban. Vegye figyelembe azt is, hogy minden beépülő modul a jQuery-től függ (ez azt jelenti, hogy a jQuery-t a beépülő modulok fájlok előtt kell tartalmaznia ). Forduljon hozzánkpackage.json
, hogy megtudja, mely jQuery verziók támogatottak.
Legördülő menüink, előugró ablakaink és eszköztippjeink a Popper.js -től is függenek .
Szinte minden Bootstrap beépülő modul engedélyezhető és konfigurálható kizárólag HTML-en keresztül adatattribútumokkal (a JavaScript funkció használatának előnyben részesített módja). Ügyeljen arra, hogy egyetlen elemnél csak egy adatattribútum-készletet használjon (pl. nem indíthat el eszközleírást és módozatot ugyanarról a gombról).
Bizonyos helyzetekben azonban kívánatos lehet ezt a funkciót letiltani. Az adatattribútum API letiltásához szüntesse meg az összes eseményt a dokumentum névterében, data-api
így:
Alternatív megoldásként egy adott beépülő modul megcélzásához egyszerűen adja meg a beépülő modul nevét névtérként a data-api névtér mellett, így:
Menekülő szelektorok
Ha speciális választókat használ, például: collapse:Example
, feltétlenül hagyja el őket, mert a jQuery-n keresztül kerülnek át.
A Bootstrap egyéni eseményeket biztosít a legtöbb plugin egyedi műveletéhez. Általában ezek főnévi igenév és múlttag alakban fordulnak elő – ahol az infinitivus (pl. show
) egy esemény elején, múltbeli igenév alakja (pl. shown
) pedig egy cselekvés befejezésekor aktiválódik.
Minden infinitiv esemény preventDefault()
funkcionalitást biztosít. Ez lehetővé teszi egy művelet végrehajtásának leállítását, mielőtt az elindulna. Ha az eseménykezelő false értéket ad vissza, az automatikusan meghívja a preventDefault()
.
Úgy gondoljuk, hogy az összes Bootstrap beépülő modult tisztán a JavaScript API-n keresztül használhatja. Minden nyilvános API egyetlen, láncolható metódus, és visszaadja a gyűjteményt.
Minden metódusnak el kell fogadnia egy opcionális opciós objektumot, egy karakterláncot, amely egy adott metódust céloz, vagy semmit (amely alapértelmezett viselkedésű beépülő modult indít):
Minden beépülő modul a nyers konstruktorát is megjeleníti egy Constructor
tulajdonságon: $.fn.popover.Constructor
. Ha egy adott bővítménypéldányt szeretne lekérni, kérje le közvetlenül egy elemből: $('[rel="popover"]').data('popover')
.
Minden programozott API metódus aszinkron , és visszatér a hívóhoz az áttérés megkezdése után, de még azelőtt, hogy az véget érne .
Egy művelet végrehajtásához, miután az átmenet befejeződött, meghallgathatja a megfelelő eseményt.
Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívását .
A beépülő modul alapértelmezett beállításait módosíthatja a bővítmény Constructor.Default
objektumának módosításával:
Néha szükséges a Bootstrap beépülő modulok használata más UI keretrendszerekkel. Ilyen körülmények között időnként előfordulhatnak névtér-ütközések. Ha ez megtörténik, hívhatja azt .noConflict
a beépülő modult, amelynek az értékét vissza szeretné állítani.
VERSION
A Bootstrap jQuery beépülő moduljainak verziója a beépülő modul konstruktorának tulajdonságán keresztül érhető el . Például az eszköztipp beépülő modulhoz:
A Bootstrap beépülő moduljai nem esnek vissza különösen kecsesen, ha a JavaScript le van tiltva. Ha ebben az esetben érdekli a felhasználói élmény, használja <noscript>
a helyzet elmagyarázásához (és a JavaScript újraengedélyezéséhez) a felhasználóknak, és/vagy adja hozzá saját egyéni tartalékait.
Harmadik féltől származó könyvtárak
A Bootstrap hivatalosan nem támogatja a harmadik fél JavaScript-könyvtárait , mint például a Prototype vagy a jQuery UI. A .noConflict
névteres események ellenére előfordulhatnak kompatibilitási problémák, amelyeket egyedül kell megoldania.
A Bootstrap összes JavaScript-fájlja attól függ, util.js
és azt a többi JavaScript-fájl mellett kell tartalmaznia. Ha a lefordított (vagy kicsinyített) fájlt használod bootstrap.js
, akkor ezt nem kell belefoglalnod – már ott van.
util.js
segédfunkciókat és alapvető segédprogramot az transitionEnd
eseményekhez, valamint egy CSS átmeneti emulátort tartalmaz. A többi beépülő modul a CSS átmenet támogatásának ellenőrzésére és a függő átmenetek elkapására használja.