JavaScript nisqa

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.

Bootstrap nisqata huk módulo hina llamk'achispa

ESMHuk Bootstrap kaqmanta ( bootstrap.esm.jschaymanta ) ruwasqa laya quyku bootstrap.esm.min.jsmayqinchus Bootstrap huk módulo hina maskaqniykipi llamk'achiyta saqin, sichus maskaqniyki maskaqkuna yanapanku .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Dependenciakuna

Wakin plugins chaymanta CSS componentes wak plugins kaqmanta hapirin. Sichus sapalla plugins churanki, allinta qhaway kay dependenciakuna docs kaqpi.

Urmachiyniyku, popovers chaymanta yanapakuyniykupas Popper kaqmanta dependen .

¿Todavía quieres usar jQuery? ¡Atikunmi!

Bootstrap 5 mana jQuery kaqwan llamk'anapaq ruwasqa kachkan, ichaqa jQuery kaqwan componentesniyku llamk'achiyta atikunraq. Sichus Bootstrap objeto jQuerykaqpiwindow tarin chayqa llapa componentesniyku jQuery kaqpa plugin sistemanpi yapanqa; kayqa niyta munan ruwayta $('[data-bs-toggle="tooltip"]').tooltip()atikunki yanapakuykunata atichinapaq. Chaynallataqmi wakin componentenchikkunapas.

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).

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().

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API programática nisqa

Llapan ruwaqkuna huk akllana akllanakuna objeto utaq mana imatapas chaskinku (mayqinchus huk plugin ñawpaqmanta ruwayninwan qallarichin):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Sichus huk particular plugin instanciata hap'iyta munanki, sapa plugin huk getInstancemétodota riqsichin. Huk elementomanta chiqanmanta hurqunapaqqa kayta ruway: bootstrap.Popover.getInstance(myPopoverEl).

Ruraqkunapi CSS akllaqkuna

Huk CSS akllaqtapas llamk'achiy atikunki ñawpaq argumento hina huk DOM elementomanta ranti plugin qallariypaq. Kunanqa pluginpaq elementoqa querySelectormétodowan tarikun chaymanta pluginsniyku huk elementollata yanapanku.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('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 .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

Mana ch'aqwayniyuq (jQuery llamk'achiptiykilla)

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 pluginsninpa laya kaqninman yaykuyta atikunman VERSIONplugin ruwaqpa kaqnin kaqnintakama. Ejemplopaq, yanapakuypa yanapakuynin pluginpaq:

bootstrap.Tooltip.VERSION // => "5.1.3"

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.

Desinfectante

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

Ñawpaqmanta churasqa allowListchaniqa kaymi:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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 allowListruwayta atinki:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})