JavaScript nisqa

Bootstrap kawsayman apamuy munasqa JavaScript pluginsniykuwan jQuery kaqpi ruwasqa. Yachay sapa plugin kaqmanta, willayniykumanta chaymanta programatico API akllanakunamanta, chaymanta aswan.

Sapakama utaq huñusqa

Plugins sapalla churasqa kankuman (Bootstrap sapalla kaqninta llamk'achispa js/dist/*.js), utaq tukuy huk kutillapi llamk'achispa bootstrap.jsutaq pisiyachisqa bootstrap.min.js(ama iskayninta churaychu).

Sichus huk bundler (Webpack, Rollup...) llamk'achkanki, /js/dist/*.jswillañiqikunata llamk'achiy atikunki mayqinkunachus UMD wakichisqa kachkanku.

Dependenciakuna

Wakin plugins chaymanta CSS componentes wak plugins kaqmanta hapirin. Sichus sapalla plugins churanki, allinta qhaway kay dependenciakuna docs kaqpi. Hinallataq, tukuy plugins jQuery kaqmanta hapirin (kayqa niyta munan jQuery ñawpaq plugin willañiqikuna kachkaptin churasqa kanan tiyan ). Consulta nuestropackage.json para ver las versiones de jQuery que se apoya.

Urmachiyniyku, popovers chaymanta yanapakuyniykupas Popper.js kaqmanta hapirin .

Atributos de datos

Yaqa llapa Bootstrap plugins atichisqa chaymanta ruwasqa kanman sapalla HTML kaqninta willay layakunawan (ñawpaq munasqayku JavaScript ruwanakuna llamk'achiyta). Huk elementollapi huk huñu willay layakunallata llamk'achiy ( kayhina, mana huk yanapakuypa yuyaychayninta chaymanta modal kaqlla ñit'inamanta llamk'achiyta atikunkichu).

Ichaqa, wakin situacionkunapi kay ruwayta mana llamk'achiyta munasqa kanman. Willayta atributo API mana llamk'achinapaq, llapa ruwaykuna qillqapi sutikuna ch'usaqchasqa data-apikayhina kaqwan mana watay:

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

Hukninpi, huk específico plugin kaqman targetta ruwanapaq, pluginpa sutinta huk sutinchana hina churaylla kayhina data-api sutinchanawan kuska:

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

Eventos nisqakuna

Bootstrap sapanchasqa ruwaykunata qun aswan plugins sapalla ruwanakuna kaqpaq. Tukuypaq, kaykunaqa mana tukukuq, ñawpaq participio nisqa rikch'aypi hamunku - maypichus infinitivo (ex. show) huk suceso qallariypi llamk'achisqa, ñawpaq participio nisqa rikch'ayninqa (ex. shown) huk ruway tukukuptin llamk'achisqa.

Llapan mana tukukuq sucesokuna preventDefault()ruwayta qun. Kayqa huk ruwayta manaraq qallarichkaptin sayachiy atiyta qun. Huk suceso kamachiqmanta llulla kutichiypas kikinmanta waqyanqa preventDefault().

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

API programática nisqa

Hinallataq iñiyku llapa Bootstrap plugins llamk'achiyta atisqaykita ch'uya JavaScript API kaqnintakama. Llapan llapapaq APIkuna sapalla, kadenayuq ruwanakuna kanku, chaymanta huñusqa ruwasqa kutichiy.

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

Llapan ruwanakuna huk akllana akllanakuna objetota chaskinanku tiyan, huk watiqa mayqinchus huk ruwanaman chayan, utaq mana ima (mayqinchus huk plugin ñawpaqmanta ruwaywan qallarichin):

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

ConstructorSapa pluginpas huk propiedadpi raw ruwaqnintam qawachin : $.fn.popover.Constructor. Sichus huk plugin instanciata chaskiyta munanki, huk elementomanta chiqalla kutichiy: $('[rel="popover"]').data('popover').

Funciones y transiciones asíncronas nisqakuna

Llapan programa API ruwanakuna asíncrono kanku chaymanta waqyaqman kutimunku huk kuti tikray qallarisqa ichaqa manaraq tukukuchkaptin .

Huk kuti tikray tukusqaña huk ruwayta ruwanapaq, tupaq ruwayta uyariyta atikunki.

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

Además huk método waqyay huk componente transitorio kaqpi mana qhawasqachu kanqa .

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

Ñawpaqmanta churasqakuna

Huk pluginpaq ñawpaqmanta churasqakunata tikrayta atikunki pluginpa Constructor.Defaultobjetonta tikraspa:

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

Mana ch’aqwayniyuq

Wakin kutiqa huk UI marcokunawan Bootstrap plugins llamk'achina tiyan. Kayhina kaqtinqa, sutikunap chiqan t'inkinakuyninkuna wakin kutipi kanman. Sichus kay ruwakun, chay plugin kaqman waqyayta .noConflictatikunki mayqinmantachus chanita kutichiyta munanki.

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

Versión yupaykuna

Sapa Bootstrap kaqpa jQuery plugins kaqpa laya VERSIONkaqninqa plugin ruwaqpa propiedadnin kaqninta yaykuyta atikun. Ejemplopaq, yanapakuypa yanapakuynin pluginpaq:

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

JavaScript mana llamk'achisqa kaptin mana huk especial fallbacks kaqchu

Bootstrap kaqpa plugins mana qhipaman urmankuchu particularmente gracioso kaqwan JavaScript mana llamk'achisqa kaqtin. Sichus kay casopi ruwaqpa experiencianmanta llakikunki, llamk'achiy <noscript>situacionta sut'inchanapaq (hinallataq imayna JavaScript kaqmanta atichiyta) ruwaqniykikunaman, chaymanta/utaq kikiyki ruwasqa fallbacksniyki yapay.

Util

Llapan Bootstrap kaqpa JavaScript willañiqikuna util.jschaymanta hapirin chaymanta wak JavaScript willañiqikunawan kuska churasqa kanan tiyan. Sichus huñusqa (utaq pisiyachisqa) llamk'achkanki bootstrap.js, mana kayta churanayki tiyanchu —chaypi kachkanña.

util.jsyanapakuy ruwanakuna chaymanta huk sapsi yanapaq transitionEndruwaykunapaq chaymanta huk CSS tikray emulador kaqwan. Huk plugins kaqwan llamk'achisqa CSS tikray yanapakuyta qhawanapaq chaymanta warkusqa tikraykunata hap'inapaq.

Desinfectante

Tooltips chaymanta Popovers ruwasqayku desinfectanteykuta llamk'achinku akllanakunata chuyanchanapaq mayqinkunachus HTML chaskinku.

Ñawpaqmanta churasqa whiteListchaniqa kaymi:

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

Sichus kay ñawpaqmanta musuq chanikunata yapayta munanki kaykunata whiteListruwayta atinki:

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)

Sichus desinfectanteykumanta pasayta munanki imaraykuchus huk dedicada biblioteca llamk'ayta munanki, kayhina DOMPurify , kaykunata ruwanayki tiyan:

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