JavaScript ezali
Mema Bootstrap na bomoi na ba plugins na biso ya JavaScript oyo okoki kopona oyo etongami na jQuery. Yekola na ntina ya plugin moko na moko, ba données na biso mpe ba options ya API programmatique, mpe mingi mosusu.
Moto na moto to oyo esangisi yango
Ba plugins ekoki kozala na kati moko moko (kosalela Bootstrap's individual js/dist/*.js
), to nyonso na mbala moko kosalela bootstrap.js
to oyo ekitisami bootstrap.min.js
(kokɔtisa nyonso mibale te).
Soki osaleli bundler (Webpack, Rollup...), okoki kosalela /js/dist/*.js
ba fichiers oyo ezali prêt ya UMD.
Ba dépendances
Ba plugins misusu na ba composants ya CSS etali ba plugins misusu. Soki otie ba plugins moko moko, sala makasi otala ba dépendances oyo na ba docs. Yeba pe que ba plugins nionso e dépend na jQuery (yango elakisi que jQuery esengeli ezala na kati liboso ya ba fichiers ya ba plugin). Consultez notrepackage.json
po omona ba versions nini ya jQuery ezo soutenir.
Ba dropdowns na biso, ba popovers na ba tolips ya bisaleli pe etali Popper.js .
Ba attributs ya ba données
Pene na ba plugins nionso ya Bootstrap ekoki kozala activé mpe configuré na nzela ya HTML kaka na ba attributs ya ba données (lolenge na biso ya kosalela fonctionnalité ya JavaScript oyo tolingaka mingi). Sala makasi ya kosalela kaka ensemble moko ya ba attributs ya ba données na élément moko (ndakisa, okoki te ko déclencher tooltip mpe modal na bouton moko.)
Kasi, na makambo mosusu ekoki kozala malamu kokanga mosala yango. Mpo na kokanga API ya attribut ya ba données, longola makambo nyonso na mokanda oyo ezali na esika ya nkombo na data-api
lokola bongo:
$(document).off('.data-api')
Na lolenge mosusu, mpo na ko cibler plugin moko ya sikisiki, kotia kaka kombo ya plugin lokola esika ya nkombo elongo na esika ya nkombo ya data-api lokola oyo:
$(document).off('.alert.data-api')
Bato oyo baponaka
Actuellement pona ko requêter ba éléments DOM tosalelaka ba méthodes natives querySelector
pe querySelectorAll
pona ba raisons ya performance, donc il faut osalela ba sélecteurs valides . Soki osaleli ba sélecteurs spéciaux, na ndakisa: collapse:Example
sala makasi okima yango.
Makambo oyo esalemaki
Bootstrap epesaka ba événements personnalisés pona ba actions unique ya ba plugins mingi. Mingimingi, oyo eyaka na lolenge ya infinitif mpe ya participe eleki - esika infinitif (ex. show
) ebandisami na ebandeli ya likambo moko, mpe lolenge na yango ya participe ya kala (ex. shown
) ebandisami na bosilisi ya likambo moko.
Ba événements infinitifs nionso epesaka preventDefault()
fonctionnalité. Yango epesaka makoki ya kopekisa exécution ya action moko avant ebanda. Kozongisa lokuta uta na mobongisi ya likambo ekobenga mpe automatiquement preventDefault()
.
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
API ya programme
Tondimi mpe ete osengeli kozala na likoki ya kosalela ba plugins nyonso ya Bootstrap kaka na nzela ya API ya JavaScript. Ba API nionso ya leta ezali ba méthodes moko, oyo ekoki kozala na chaîne, mpe ezongisaka bosangisi oyo esalemaki na yango.
$('.btn.danger').button('toggle').addClass('fat')
Ba méthodes nionso esengeli kondima objet ya ba options optionnelles, chaîne oyo ezo cibler méthode moko boye, to eloko moko te (oyo ebandisaka plugin na comportement par défaut):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Plugin moko na moko e exposer pe constructeur na yango brut na Constructor
propriété moko: $.fn.popover.Constructor
. Soki olingi kozwa instance ya plugin moko boye, zwa yango mbala moko na élément moko: $('[rel="popover"]').data('popover')
.
Ba fonctions asynchrones na ba transitions
Ba méthodes nionso ya API programmatique ezali asynchrone mpe ezongaka na mobengi mbala moko transition ebandi kasi liboso esila .
Pona kosala action moko soki transition esili, okoki koyoka événement correspondant.
$('#myCollapse').on('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
En plus appel ya méthode na composante ya transition ekozala ignorée .
$('#myCarousel').on('slid.bs.carousel', function (event) {
$('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
Ba paramètres ya défaut
Okoki kobongola ba paramètres ya liboso ya plugin na kobongola Constructor.Default
eloko ya plugin:
// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false
Matata moko te
Tango mosusu esengeli kosalela ba plugins ya Bootstrap na ba cadres misusu ya UI. Na makambo oyo, bokutani ya esika ya nkombo ekoki kobima ntango mosusu. Soki likambo yango esalemi, okoki kobenga .noConflict
plugin oyo olingi kozongisa motuya na yango.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Mituya ya ba versions
Version ya moko na moko ya ba plugins jQuery ya Bootstrap ekoki kozuama na nzela ya VERSION
propriété ya constructeur ya plugin. Ndakisa, mpo na plugin ya tooltip:
$.fn.tooltip.Constructor.VERSION // => "4.6.2"
Ba fallbacks ya sipesiale te tango JavaScript ezali désactivé
Ba plugins ya Bootstrap ezongaka sima te particulièrement gracement tango JavaScript ezali désactivé. Soki ozali komibanzabanza mpo na mayele ya mosaleli na likambo oyo, salelá <noscript>
mpo na kolimbola likambo (mpe ndenge ya kofungola lisusu JavaScript) epai ya basaleli na yo, mpe/to kobakisa ba fallbacks na yo moko oyo olingi.
Babibliotɛkɛ ya bato mosusu
Bootstrap esungaka officiellement te ba bibliothèques ya JavaScript ya troisième partie lokola Prototype to jQuery UI. Malgré .noConflict
mpe ba événements namespaced, ekoki kozala na ba problèmes ya compatibilité oyo esengeli o bongisa yo moko.
Util
Ba fichiers JavaScript nionso ya Bootstrap e dépend na util.js
yango pe esengeli ezala na kati pembeni ya ba fichiers JavaScript misusu. Soki ozali kosalela oyo esangisi (to oyo ekitisami) bootstrap.js
, ntina ya kokɔtisa oyo ezali te —ezali deja wana.
util.js
ezali na misala ya utilité mpe mosungi ya moboko mpo na transitionEnd
makambo mpe lisusu émulateur ya transition CSS. Esalelamaka na ba plugins mosusu mpo na kotala soki ezali na lisungi ya mbongwana ya CSS mpe mpo na kokanga ba transitions oyo ekangami.
Sanitizer ya kosala
Tooltips na Popovers basalelaka sanitizer na biso intégré pona ko sanitiser ba options oyo endimaka HTML.
Motuya ya liboso whiteList
ezali oyo elandi:
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
// 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: []
}
Soki olingi kobakisa ba valeurs ya sika na défaut whiteList
oyo okoki kosala oyo elandi:
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
// To allow table elements
myDefaultWhiteList.table = []
// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)
Soki olingi ko contourner sanitizer na biso po olingi kosalela bibliothèque dédiée, par exemple DOMPurify , esengeli osala oyo elandi:
$('#yourTooltip').tooltip({
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})