JavaScript

Zana Bootstrap mubuzima hamwe na JavaScript idahitamo yubatswe kuri jQuery. Wige kuri buri plugin, amakuru yacu hamwe na gahunda ya API ihitamo, nibindi byinshi.

Umuntu ku giti cye cyangwa yakusanyijwe

Amacomeka arashobora gushyirwamo kugiti cye (ukoresheje Bootstrap kugiti cye js/dist/*.js), cyangwa byose icyarimwe ukoresheje bootstrap.jscyangwa bigabanijwe bootstrap.min.js(ntushyiremo byombi).

Niba ukoresheje bundler (Webpack, Rollup…), urashobora gukoresha /js/dist/*.jsdosiye UMD yiteguye.

Kwishingikiriza

Amacomeka hamwe nibice bya CSS biterwa nandi macomeka. Niba ushizemo amacomeka kugiti cye, menya neza niba ugenzura ibyo biterwa muri doc. Menya kandi ko amacomeka yose aterwa na jQuery (ibi bivuze ko jQuery igomba kuba irimo mbere ya dosiye ya plugin). Menyesha ibyacupackage.json kugirango urebe verisiyo ya jQuery ishyigikiwe.

Ibitonyanga byacu, popovers hamwe nibikoresho byifashishwa na Popper.js .

Ibiranga amakuru

Amacomeka hafi ya yose ya Bootstrap arashobora gushobozwa no kugenwa binyuze muri HTML yonyine hamwe nibiranga amakuru (uburyo twahisemo bwo gukoresha imikorere ya JavaScript). Wemeze gukoresha gusa urutonde rwibintu biranga ikintu kimwe (urugero, ntushobora gukurura igikoresho na modal kuva kuri buto imwe.)

Ariko, mubihe bimwe na bimwe birashobora kuba byiza guhagarika iyi mikorere. Kugirango uhagarike amakuru yikiranga API, uhuza ibyabaye byose kumazina yinyandiko yashyizwe hamwe nkaya data-api:

$(document).off('.data-api')

Ubundi, kugirango ugaragaze plugin yihariye, shyiramo gusa izina rya plugin nkumwanya wizina hamwe na data-api izina ryumwanya nkuyu:

$(document).off('.alert.data-api')

Ibyabaye

Bootstrap itanga ibyabaye kubintu byinshi byacometse kubikorwa byihariye. Mubisanzwe, ibi biza muburyo butagira ingano kandi bwashize - aho infinitive (ex. show) Itangizwa mugitangira ibirori, kandi ifishi yacyo ya kera (ex. shown) Iterwa no kurangiza igikorwa.

Ibintu byose bitagira ingano bitanga preventDefault()imikorere. Ibi bitanga ubushobozi bwo guhagarika ikorwa ryigikorwa mbere yuko gitangira. Garuka ibinyoma bivuye mubyabaye nabyo bizahita bihamagara preventDefault().

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Gahunda ya API

Turizera kandi ko ugomba gushobora gukoresha amacomeka yose ya Bootstrap ukoresheje JavaScript API. API rusange rusange ni imwe, uburyo bukurikirana, kandi igasubiza icyegeranyo cyakozwe.

$('.btn.danger').button('toggle').addClass('fat')

Uburyo bwose bugomba kwemera ibintu bidahitamo ikintu, umugozi ugamije uburyo runaka, cyangwa ntakintu (gitangiza plugin hamwe nimyitwarire idasanzwe):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Buri plugin irerekana kandi ibyubaka byayo ku Constructormutungo : $.fn.popover.Constructor. Niba ushaka kubona plugin runaka urugero, iyikure muburyo butaziguye : $('[rel="popover"]').data('popover').

Imikorere ninzibacyuho

Uburyo bwa porogaramu zose za API nuburyo budahwitse kandi bugaruka kumuhamagara iyo inzibacyuho itangiye ariko mbere yuko irangira .

Kugirango ukore igikorwa iyo inzibacyuho irangiye, urashobora kumva ibyabaye.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

Mubyongeyeho uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#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 !!

Igenamiterere risanzwe

Urashobora guhindura igenamiterere risanzwe rya plugin uhindura Constructor.Defaultikintu cya plugin:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Nta makimbirane

Rimwe na rimwe, birakenewe gukoresha amacomeka ya Bootstrap hamwe nibindi UI. Muri ibi bihe, umwanya wizina urashobora guhura rimwe na rimwe. Niba ibi bibaye, urashobora guhamagara .noConflictkuri plugin wifuza guhindura agaciro ka.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Inomero

Verisiyo ya buri pompe ya jQuery ya Bootstrap irashobora kugerwaho hifashishijwe VERSIONumutungo wububiko bwa plugin. Kurugero, kubikoresho bya plugin:

$.fn.tooltip.Constructor.VERSION // => "4.1.3"

Nta gusubira inyuma bidasanzwe iyo JavaScript ihagaritswe

Amacomeka ya Bootstrap ntasubira inyuma cyane cyane mugihe JavaScript ihagaritswe. Niba witaye kuburambe bwabakoresha muriki kibazo, koresha <noscript>kugirango usobanure uko ibintu bimeze (nuburyo bwo kongera gukora JavaScript) kubakoresha, kandi / cyangwa wongereho ibyo wiboneye.

Koresha

Amadosiye yose ya JavaScript ya Bootstrap biterwa util.jskandi igomba gushyirwamo hamwe nandi ma dosiye ya JavaScript. Niba ukoresha icyegeranyo (cyangwa cyaciwe) bootstrap.js, nta mpamvu yo gushyiramo ibi-birahari.

util.jsikubiyemo ibikorwa byingirakamaro hamwe numufasha wibanze transitionEndkubyabaye kimwe na CSS yinzibacyuho. Ikoreshwa nandi macomeka kugirango agenzure inkunga ya CSS yinzibacyuho no gufata inzibacyuho.