JavaScript

Afferte Bootstrap ad vitam cum JavaScript plugins nostra libitum aedificatum in jQuery. Disce de singulis plugin, notitias nostras et programma API optiones, et plura.

Singula vel Composuit

Plugines singillatim includi possunt (singulis Bootstrap utens js/dist/*.js), vel simul utens bootstrap.jsvel minutum bootstrap.min.js(utrumque non includit).

Si fasciculo uteris (Webpack, Rollup…), /js/dist/*.jsfasciculis uti potes quae parata sunt UMD.

Dependentiae

Quaedam plugins et CSS elementa ab aliis plugins pendent. Si singula plugins includas, fac ut has dependentias in soUicitudo reprimas. Etiam nota omnia plugins ab jQuery pendent (hoc modo jQuery ante tabulas plugin includi debet). Consule nostrumpackage.json videre quae versiones jQuery fulciantur.

Nostra stillicidia, popoverae et instrumenta etiam a Popper.js pendent .

Data attributa

Fere omnia plugins Bootstrap per HTML solum cum attributis data et configurari possunt (praelatus modus utendi JavaScript functionality). Vide tantum ut unum punctum attributorum notitiarum in unico elemento (exempli gratia, instrumenti instrumenti et modalis ex eadem conjunctione felis non potes).

In nonnullis tamen adiunctis exoptandum est hanc functionem disable esse. Ut inactivandi API tributis, omnia solve in documento nominato data-apitali modo:

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

Vel, plugin specificum oppugnare, solum includere nomen plugin in spatio nominali cum electronicis api-spatii ut hoc:

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

Events

Mores eventus Bootstrap praebet pro pluribus plugins' singularibus actionibus. Fere hae veniunt in forma participii infinitivi et praeteriti - ubi infinitivus (ex. show) utitur in initio eventus, et forma participii praeteriti (ex. shown) utitur ad complementum actionis.

Omnes infinitivi eventus preventDefault()functionem praebent. Hoc praebet facultatem ad executionem actionis antequam incipiat prohibere. Falsus reversus ab eventu tracto etiam automatice vocabit preventDefault().

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

Programma API

Credimus etiam te posse omnia Bootstrap plugins pure per JavaScript API uti. APIs publicus omnes simplices sunt, catenabiles modi, et collectio sollicitata redde.

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

Omnes modi accipere debent obiectum optionum libitum, chorda quae modum certo peltat, vel nihil (quod plugin cum defectu agendi) inchoat);

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

Singula plugin etiam suam rudis constructor in Constructorproprietatem exponit: $.fn.popover.Constructor. Si particularem instantiam plugin obtinere velis, eam protinus ab elemento recipe: $('[rel="popover"]').data('popover').

Asynchronous munera et transitiones

Omnes programma API methodi asynchroni sunt et ad salutatorem redire semel incepit sed antequam finitur transitus .

Ad actionem faciendam semel transitus perfectus est, eventus respondentem audire potes.

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

Adde methodus vocabuli componentis transitionis ignorabitur .

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

Default occasus

Default occasus mutare potes pro plugin Constructor.Defaultobiecto obiecto modificato:

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

Non conflictus

Aliquando necesse est plugins Bootstrap uti cum aliis UI compagibus. His in adiunctis, spatii spatii nomina interdum fieri possunt. Si hoc accidit, .noConflictplugin vocare voles ad valorem reverti.

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

Numeri versionis

Uniuscuiusque versio scriptoris jQuery plugins Bootstrap accessi potest per VERSIONproprietatem fabricatoris plugin. Exempli gratia, pro tooltip plugin:

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

Nullus specialis fallbacks cum JavaScript est disabled

Plugini Bootstrap non recedunt praecipue lepide cum JavaScript debilis est. Si experientiam usoris in hoc casu curas, utere <noscript>ad explicandam condicionem (et quomodo re-enable JavaScript) ad usores tuos, et/vel lapsus consuetudinem tuam adde.

Util

All Bootstrap's JavaScript files depend on util.jsand it has to be included alongside the other JavaScript files. Si compilato (vel minuto) uteris bootstrap.js, non opus est hoc includere — iam est.

util.jsfunctiones utilitates includit ac praecipuum adiutorium transitionEndeventuum necnon aemulum transitus CSS. Aliis plugins usus est ad sustentationem transitus CSS reprimendam et transitus pensiles capiendas.

Sanitizer

Instrumenta et Popoveri nostris constructis in sanitizer utuntur ad optiones sanitizandas quae HTML recipiunt.

De valore default whiteListsequenti est:

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

Si vis novas valores ad hunc defaltam whiteListaddere, sequentia facere potes:

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)

Si vis sanitizer praeterire quod mavis bibliotheca dedicata uti, exempli gratia DOMPurify , sequentia debes facere:

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