JavaScript

Individuaalne või koostatud

Pluginad saab lisada üksikult (kasutades Bootstrapi individuaalset funktsiooni js/dist/*.js) või kõik korraga, kasutades bootstrap.jsvõi minimeeritud bootstrap.min.js(ärge kaasake mõlemat).

Kui kasutate komplekteerijat (veebipakk, koond...), saate kasutada /js/dist/*.jsfaile, mis on UMD-valmidusega.

Bootstrapi kasutamine moodulina

Pakume Bootstrapi versiooni, mis on ehitatud kui ESM( bootstrap.esm.jsja bootstrap.esm.min.js), mis võimaldab teil kasutada Bootstrapi oma brauseris moodulina, kui teie sihitud brauserid seda toetavad .

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

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

Sõltuvused

Mõned pistikprogrammid ja CSS-i komponendid sõltuvad teistest pistikprogrammidest. Kui lisate pistikprogrammid eraldi, kontrollige kindlasti nende sõltuvuste olemasolu dokumentidest.

Popperist sõltuvad ka meie rippmenüüd, hüpikaknad ja tööriistaspikrid .

Kas soovite endiselt jQueryt kasutada? See on võimalik!

Bootstrap 5 on loodud kasutamiseks ilma jQueryta, kuid meie komponente on siiski võimalik kasutada koos jQueryga. Kui Bootstrap tuvastab jQueryobjektil , windowlisab see kõik meie komponendid jQuery pistikprogrammide süsteemi; see tähendab, et saate $('[data-bs-toggle="tooltip"]').tooltip()tööriistavihjeid lubada. Sama kehtib ka meie teiste komponentide kohta.

Andmete atribuudid

Peaaegu kõiki Bootstrapi pistikprogramme saab lubada ja konfigureerida ainult HTML-i kaudu koos andmeatribuutidega (meie eelistatud viis JavaScripti funktsiooni kasutamiseks). Kasutage ühel elemendil kindlasti ainult ühte andmeatribuutide komplekti (nt te ei saa samal nupul käivitada kohtspikri ja modaali).

Sündmused

Bootstrap pakub kohandatud sündmusi enamiku pistikprogrammide ainulaadsete toimingute jaoks. Üldjuhul on need infinitiivi ja mineviku osastava vormina – kus infinitiiv (nt show) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt shown) käivitatakse tegevuse lõppedes.

Kõik infinitiivsed sündmused pakuvad preventDefault()funktsionaalsust. See annab võimaluse toimingu sooritamine enne selle algust peatada. Sündmuste töötlejalt vale tagastamine kutsub automaatselt välja ka 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...
})

Programmaatiline API

Kõik konstruktorid aktsepteerivad valikuliste suvandite objekti või mitte midagi (mis käivitab pistikprogrammi vaikekäitumisega):

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

Kui soovite hankida konkreetse pistikprogrammi eksemplari, avaldab iga pistikprogramm getInstancemeetodi. Selle otse elemendist toomiseks tehke järgmist: bootstrap.Popover.getInstance(myPopoverEl).

CSS-i valijad konstruktorites

Plugina lähtestamiseks saate DOM-elemendi asemel esimese argumendina kasutada ka CSS-i valijat. Praegu leitakse selle querySelectormeetodi abil pistikprogrammi element, kuna meie pistikprogrammid toetavad ainult ühte elementi.

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

Asünkroonsed funktsioonid ja üleminekud

Kõik programmilised API meetodid on asünkroonsed ja naasevad helistaja juurde pärast ülemineku algust, kuid enne selle lõppu .

Toimingu sooritamiseks pärast ülemineku lõppemist saate kuulata vastavat sündmust.

var myCollapseEl = document.getElementById('myCollapse')

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

Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

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

Vaikeseaded

Saate muuta pistikprogrammi vaikesätteid, muutes pistikprogrammi Constructor.Defaultobjekti.

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

Konflikt puudub (ainult jQuery kasutamisel)

Mõnikord on vaja Bootstrapi pistikprogramme kasutada koos teiste kasutajaliidese raamistikega. Sellistel juhtudel võib aeg-ajalt tekkida nimeruumi kokkupõrkeid. Kui see juhtub, võite helistada .noConflictpistikprogrammile, mille väärtust soovite taastada.

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

Versiooni numbrid

Iga Bootstrapi pistikprogrammi versioonile pääseb juurde VERSIONpistikprogrammi konstruktori atribuudi kaudu. Näiteks tööriistavihje pistikprogrammi jaoks:

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

Kui JavaScript on keelatud, pole mingeid erilisi tagavarasid

Bootstrapi pistikprogrammid ei lange eriti graatsiliselt tagasi, kui JavaScript on keelatud. Kui teile huvitab sel juhul kasutajakogemus, kasutage <noscript>olukorra selgitamiseks (ja JavaScripti uuesti lubamiseks) oma kasutajatele ja/või oma kohandatud varude lisamiseks.

Puhastusvahend

Tööriistavihjed ja hüpikaknad kasutavad HTML-i aktsepteerivate valikute puhastamiseks meie sisseehitatud puhastusvahendit.

Vaikeväärtus allowListon järgmine:

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

Kui soovite sellele vaikeväärtusele lisada uusi väärtusi, allowListsaate teha järgmist.

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)

Kui soovite meie desinfitseerimisvahendist mööda minna, kuna eelistate kasutada spetsiaalset teeki, näiteks DOMpurify , peaksite tegema järgmist.

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