Fara í aðalefni Farðu í skjalaleiðsögn
in English

JavaScript

Gleymdu Bootstrap lífi með valfrjálsu JavaScript viðbótunum okkar. Lærðu um hverja viðbætur, gögn okkar og forritafræðilega API valkosti og fleira.

Einstök eða samsett

Viðbætur geta verið innifalin fyrir sig (með því að nota Bootstrap's individual js/dist/*.js), eða öll í einu með því að nota bootstrap.jseða minnka bootstrap.min.js(ekki innihalda bæði).

Ef þú notar búntara (Webpack, Rollup…), geturðu notað /js/dist/*.jsskrár sem eru UMD tilbúnar.

Að nota Bootstrap sem einingu

Við bjóðum upp á útgáfu af Bootstrap byggð sem ESM( bootstrap.esm.jsog bootstrap.esm.min.js) sem gerir þér kleift að nota Bootstrap sem einingu í vafranum þínum, ef markvöfrarnir þínir styðja það .

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

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

Ósamhæfar viðbætur

Vegna takmarkana vafra er ekki hægt að nota sum viðbætur okkar, nefnilega Dropdown, Tooltip og Popover viðbætur í <script>merki með moduletegund vegna þess að þau eru háð Popper. Sjá nánar um málið hér .

Ósjálfstæði

Sum viðbætur og CSS íhlutir eru háðir öðrum viðbótum. Ef þú lætur viðbætur fylgja með sér, vertu viss um að athuga hvort þessar ósjálfstæði séu í skjölunum.

Fellilistarnir okkar, sprettigluggar og verkfæraábendingar eru einnig háðar Popper .

Viltu samt nota jQuery? Það er mögulegt!

Bootstrap 5 er hannað til að nota án jQuery, en það er samt hægt að nota íhluti okkar með jQuery. Ef Bootstrap finnur jQueryí windowhlutnum mun það bæta við öllum íhlutum okkar í viðbótakerfi jQuery; þetta þýðir að þú munt geta gert $('[data-bs-toggle="tooltip"]').tooltip()til að virkja verkfæraábendingar. Sama gildir um aðra þætti okkar.

Gagnaeiginleikar

Næstum allar Bootstrap viðbætur er hægt að virkja og stilla í gegnum HTML eingöngu með gagnaeiginleikum (valin leið okkar til að nota JavaScript virkni). Gakktu úr skugga um að þú notir aðeins eitt sett af gagnaeigindum á einum þætti (td þú getur ekki kveikt á tóli og aðferð frá sama hnappi).

Valsmenn

Eins og er, til að spyrjast fyrir um DOM þætti, notum við innfæddu aðferðirnar querySelectorog querySelectorAllaf frammistöðuástæðum, svo þú verður að nota gilda veljara . Ef þú notar sérstaka veljara, til dæmis: collapse:Examplevertu viss um að sleppa þeim.

Viðburðir

Bootstrap býður upp á sérsniðna atburði fyrir einstaka aðgerðir flestra viðbætur. Yfirleitt koma þær í óendanlegu formi og þátíð - þar sem óendanlegur (til dæmis show) er ræstur í upphafi atburðar, og þátíðarform hans (til dæmis shown) er ræst þegar aðgerð er lokið.

Allir óendanlegir atburðir veita preventDefault()virkni. Þetta veitir möguleika á að stöðva framkvæmd aðgerða áður en hún hefst. Ef þú skilar ósönnum frá atburðastjórnun mun einnig sjálfkrafa hringja preventDefault().

var myModal = document.getElementById('myModal')

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

jQuery viðburðir

Bootstrap mun greina jQuery ef það jQueryer til staðar í windowhlutnum og það er engin data-bs-no-jqueryeiginleiki stilltur á <body>. Ef jQuery finnst mun Bootstrap senda frá sér atburði þökk sé viðburðakerfi jQuery. Þannig að ef þú vilt hlusta á atburði Bootstrap þarftu að nota jQuery aðferðirnar ( .on, .one) í staðinn fyrir addEventListener.

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

Forritað API

Allir smiðir samþykkja valfrjálsan valmöguleikahlut eða ekkert (sem ræsir viðbót með sjálfgefna hegðun sinni):

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

Ef þú vilt fá tiltekið viðbótatilvik, afhjúpar hvert viðbót getInstanceaðferð. Til að sækja það beint úr frumefni skaltu gera þetta: bootstrap.Popover.getInstance(myPopoverEl).

CSS veljarar í smiðjum

Þú getur líka notað CSS val sem fyrstu rök í stað DOM þáttar til að frumstilla viðbótina. Eins og er er þátturinn fyrir viðbótina fundin með querySelectoraðferðinni þar sem viðbætur okkar styðja aðeins einn þátt.

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

Ósamstilltur aðgerðir og umskipti

Allar forritunaraðferðir API eru ósamstilltar og snúa aftur til þess sem hringir þegar umskiptin eru hafin en áður en henni lýkur .

Til að framkvæma aðgerð þegar umskiptum er lokið geturðu hlustað á samsvarandi atburði.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Að auki verður aðferðakall á umbreytingarhluta hunsað .

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 !!

Sjálfgefnar stillingar

Þú getur breytt sjálfgefnum stillingum fyrir viðbót með því að breyta Constructor.Defaulthlut viðbótarinnar:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Engin átök (aðeins ef þú notar jQuery)

Stundum er nauðsynlegt að nota Bootstrap viðbætur með öðrum UI ramma. Við þessar aðstæður geta árekstrar í nafnrými átt sér stað einstaka sinnum. Ef þetta gerist geturðu hringt .noConflictí viðbótina sem þú vilt breyta gildinu á.

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

Útgáfunúmer

Hægt er að nálgast útgáfuna af hverju Bootstrap-viðbótum í gegnum VERSIONeign byggingaraðila viðbótarinnar. Til dæmis, fyrir tooltip viðbótina:

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

Engar sérstakar frávik þegar JavaScript er óvirkt

Viðbætur Bootstrap falla ekki sérstaklega tignarlega til baka þegar JavaScript er óvirkt. Ef þér er annt um notendaupplifunina í þessu tilviki, notaðu <noscript>þá til að útskýra aðstæður (og hvernig á að virkja JavaScript aftur) fyrir notendum þínum og/eða bæta við eigin sérsniðnum fallbacks.

Bókasöfn þriðja aðila

Bootstrap styður ekki opinberlega þriðja aðila JavaScript bókasöfn eins og Prototype eða jQuery UI. Þrátt fyrir .noConflictatburði með nafnabili geta komið upp samhæfnisvandamál sem þú þarft að laga á eigin spýtur.

Hreinsiefni

Tooltips og Popovers nota innbyggða sótthreinsiefnið okkar til að hreinsa valkosti sem samþykkja HTML.

Sjálfgefið allowListgildi er eftirfarandi:

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

Ef þú vilt bæta nýjum gildum við þetta sjálfgefið allowListgeturðu gert eftirfarandi:

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)

Ef þú vilt komast framhjá hreinsiefninu okkar vegna þess að þú vilt frekar nota sérstakt bókasafn, til dæmis DOMPurify , ættirðu að gera eftirfarandi:

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