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 (event) {
  if (!data) {
    return event.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 bwose bwa programme 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 (event) {
  // Action to execute once the collapsible area is expanded
})

Mubyongeyeho uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

$('#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 !!

Igenamiterere risanzwe

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

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = 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 jomeri ya Bootstrap ya jQuery irashobora kugerwaho hifashishijwe VERSIONumutungo wububiko. Kurugero, kubikoresho bya plugin:

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

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 numufasha wibanze transitionEndkubyabaye kimwe na CSS yinzibacyuho. Ikoreshwa nandi macomeka kugirango agenzure inkunga ya CSS yinzibacyuho no gufata inzibacyuho.

Isuku

Ibikoresho na popovers bikoresha ibikoresho byubatswe byubatswe kugirango dusukure amahitamo yemera HTML.

Agaciro whiteListgasanzwe ni ibi bikurikira:

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: []
}

Niba ushaka kongeramo indangagaciro kuriyi isanzwe whiteListurashobora gukora ibi bikurikira:

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)

Niba ushaka kurenga isuku yacu kuko uhisemo gukoresha isomero ryabigenewe, urugero DOMPurify , ugomba gukora ibi bikurikira:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})