JavaScript

Ihatag ang Bootstrap sa kinabuhi sa among opsyonal nga JavaScript plugins nga gitukod sa jQuery. Pagkat-on mahitungod sa matag plugin, among data ug programmatic API nga mga opsyon, ug uban pa.

Indibidwal o gihugpong

Ang mga plugins mahimong iapil sa tagsa-tagsa (gamit ang Bootstrap's individual js/dist/*.js), o tanan sa usa ka higayon gamit bootstrap.jso ang minified bootstrap.min.js(ayaw iapil ang duha).

Kung mogamit ka usa ka bundler (Webpack, Rollup…), mahimo nimong gamiton ang /js/dist/*.jsmga file nga andam sa UMD.

Mga pagsalig

Ang ubang mga plugins ug CSS component nagdepende sa ubang mga plugins. Kung gi-apil nimo ang mga plugin nga tagsa-tagsa, siguruha nga susihon kini nga mga dependency sa mga doc. Timan-i usab nga ang tanan nga mga plugins nagdepende sa jQuery (kini nagpasabut nga ang jQuery kinahanglan ilakip sa wala pa ang mga file sa plugin). Konsultaha ang amongpackage.json aron makita kung unsang mga bersyon sa jQuery ang gisuportahan.

Ang among mga dropdown, popover ug tooltips nagdepende usab sa Popper.js .

Mga hiyas sa datos

Halos tanang Bootstrap plugins mahimong ma-enable ug ma-configure pinaagi sa HTML nga mag-inusara uban sa data attributes (among gusto nga paagi sa paggamit sa JavaScript functionality). Siguroha nga mogamit lang og usa ka set sa data attributes sa usa ka elemento (pananglitan, dili ka maka-trigger og tooltip ug modal gikan sa samang buton.)

Bisan pa, sa pipila ka mga sitwasyon mahimo’g gusto nga i-disable kini nga pagpaandar. Aron ma-disable ang data attribute API, i-unbind ang tanang panghitabo sa mga namespaced sa dokumento nga data-apisama niini:

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

Sa laing paagi, aron ma-target ang usa ka piho nga plugin, ilakip lang ang ngalan sa plugin ingon usa ka namespace kauban ang data-api namespace sama niini:

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

Mga panghitabo

Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan sa mga talagsaon nga aksyon sa mga plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang infinitive (ex. show) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown) ma-trigger sa pagkahuman sa usa ka aksyon.

Ang tanan nga infinitive nga mga panghitabo naghatag preventDefault()gamit. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod. Ang pagbalik sa bakak gikan sa tigdumala sa panghitabo awtomatiko usab nga motawag preventDefault().

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

Programmatic API

Nagtuo usab kami nga kinahanglan nimo nga magamit ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa JavaScript API. Ang tanang publikong API kay single, chainable nga mga pamaagi, ug ibalik ang koleksyon nga giaksyonan.

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

Ang tanan nga mga pamaagi kinahanglan nga modawat sa usa ka opsyonal nga butang nga kapilian, usa ka hilo nga nagpunting sa usa ka partikular nga pamaagi, o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga pamatasan):

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

Ang matag plugin nagbutyag usab sa iyang hilaw nga tigtukod sa usa ka Constructorkabtangan: $.fn.popover.Constructor. Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, kuhaa kini direkta gikan sa usa ka elemento: $('[rel="popover"]').data('popover').

Asynchronous nga mga gimbuhaton ug mga transisyon

Ang tanang programmatic API nga pamaagi kay asynchronous ug mobalik sa caller sa higayon nga masugdan na ang transisyon apan sa dili pa kini matapos .

Aron mapatuman ang usa ka aksyon kung makompleto na ang transisyon, mahimo nimong paminawon ang katugbang nga panghitabo.

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

Dugang pa nga ang usa ka paagi nga tawag sa usa ka transitioning component dili tagdon .

$('#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 nga mga setting

Mahimo nimong usbon ang default setting alang sa usa ka plugin pinaagi sa pag-usab sa Constructor.Defaultbutang sa plugin:

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

Walay panagbangi

Usahay gikinahanglan nga gamiton ang mga plugin sa Bootstrap sa ubang mga framework sa UI. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflictang plugin nga gusto nimo ibalik ang kantidad.

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

Numero sa bersyon

Ang bersyon sa matag usa sa Bootstrap's jQuery plugins mahimong ma-access pinaagi sa VERSIONkabtangan sa plugin's constructor. Pananglitan, alang sa tooltip plugin:

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

Walay espesyal nga mga fallbacks kung ang JavaScript gi-disable

Ang mga plugins sa Bootstrap dili mabalik ilabi na nga nindot kung ang JavaScript gi-disable. Kung nagpakabana ka bahin sa kasinatian sa gumagamit sa kini nga kaso, gamita <noscript>aron ipasabut ang sitwasyon (ug kung giunsa pag-usab ang JavaScript) sa imong mga tiggamit, ug / o pagdugang sa imong kaugalingon nga naandan nga mga fallback.

Util

Ang tanan nga mga file sa JavaScript sa Bootstrap nagdepende util.jsug kini kinahanglan nga ilakip kauban sa ubang mga file sa JavaScript. Kung gigamit nimo ang gi-compile (o gi-minified) bootstrap.js, dili kinahanglan nga ilakip kini - naa na kini.

util.jsnaglakip sa utility functions ug usa ka batakang katabang alang sa transitionEndmga panghitabo ingon man usa ka CSS transition emulator. Gigamit kini sa ubang mga plugins aron masusi ang suporta sa transisyon sa CSS ug aron makuha ang nagbitay nga mga transisyon.

Sanitizer

Ang Tooltips ug Popovers naggamit sa among built-in nga sanitizer aron sanitize ang mga opsyon nga modawat sa HTML.

Ang default whiteListnga bili mao ang mosunod:

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

Kung gusto nimong idugang ang bag-ong mga kantidad sa kini nga default whiteListmahimo nimo ang mosunod:

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)

Kung gusto nimo nga laktawan ang among sanitizer tungod kay gusto nimo nga mogamit usa ka gipahinungod nga librarya, pananglitan DOMPuify , kinahanglan nimo buhaton ang mga musunud:

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