JavaScript

Posamezno ali sestavljeno

Vtičnike je mogoče vključiti posamično (z uporabo individualnega Bootstrapa js/dist/*.js) ali vse naenkrat z uporabo bootstrap.jsali pomanjšanim bootstrap.min.js(ne vključujte obojega).

Če uporabljate povezovalnik (Webpack, Rollup ...), lahko uporabite /js/dist/*.jsdatoteke, ki so pripravljene za UMD.

Uporaba Bootstrapa kot modula

Ponujamo različico Bootstrapa, zgrajeno kot ESM( bootstrap.esm.jsin bootstrap.esm.min.js), ki vam omogoča uporabo Bootstrapa kot modula v vašem brskalniku, če to podpirajo vaši ciljni brskalniki .

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

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

Odvisnosti

Nekateri vtičniki in komponente CSS so odvisni od drugih vtičnikov. Če dodate vtičnike posamezno, preverite te odvisnosti v dokumentih.

Naši spustni meniji, pojavna okna in opisi orodij so prav tako odvisni od Popperja .

Še vedno želite uporabljati jQuery? Mogoče je!

Bootstrap 5 je zasnovan za uporabo brez jQuery, vendar je še vedno mogoče uporabljati naše komponente z jQuery. Če Bootstrap zazna jQueryobjekt window, bo dodal vse naše komponente v sistem vtičnikov jQuery; to pomeni, da boste lahko $('[data-bs-toggle="tooltip"]').tooltip()omogočili namige orodij. Enako velja za naše druge komponente.

Atributi podatkov

Skoraj vse vtičnike Bootstrap je mogoče omogočiti in konfigurirati samo prek HTML s podatkovnimi atributi (naš najprimernejši način uporabe funkcije JavaScript). Prepričajte se, da uporabljate samo en nabor podatkovnih atributov na posameznem elementu (npr. ne morete sprožiti namiga orodja in modala z istega gumba.)

Dogodki

Bootstrap ponuja dogodke po meri za večino edinstvenih dejanj vtičnikov. Na splošno so ti v obliki nedoločnika in deležnika preteklosti – kjer se nedoločnik (npr. show) sproži na začetku dogodka, njegova oblika deležnika preteklosti (npr. shown) pa se sproži ob zaključku dejanja.

Vsi nedoločni dogodki zagotavljajo preventDefault()funkcionalnost. To omogoča, da ustavite izvajanje dejanja, preden se začne. Če obravnavalec dogodkov vrne false, bo tudi samodejno poklical 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...
})

Programski API

Vsi konstruktorji sprejmejo izbirni objekt možnosti ali nič (kar sproži vtičnik s privzetim vedenjem):

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

Če želite dobiti določen primerek vtičnika, vsak vtičnik izpostavi getInstancemetodo. Če ga želite pridobiti neposredno iz elementa, naredite to: bootstrap.Popover.getInstance(myPopoverEl).

Selektorji CSS v konstruktorjih

Za inicializacijo vtičnika lahko uporabite tudi izbirnik CSS kot prvi argument namesto elementa DOM. Trenutno se element za vtičnik najde z querySelectormetodo, saj naši vtičniki podpirajo samo en element.

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

Asinhrone funkcije in prehodi

Vse programske metode API so asinhrone in se vrnejo klicatelju, ko se prehod začne, vendar preden se konča .

Če želite izvesti dejanje, ko je prehod končan, lahko poslušate ustrezen dogodek.

var myCollapseEl = document.getElementById('myCollapse')

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

Poleg tega bo prezrt klic metode prehodne komponente .

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

Privzete nastavitve

Privzete nastavitve za vtičnik lahko spremenite tako, da spremenite predmet vtičnika Constructor.Default:

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

Brez spora (samo če uporabljate jQuery)

Včasih je treba uporabiti vtičnike Bootstrap z drugimi okviri uporabniškega vmesnika. V teh okoliščinah lahko občasno pride do kolizij imenskega prostora. Če se to zgodi, lahko pokličete .noConflictvtičnik, katerega vrednost želite razveljaviti.

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

Številke različic

Do različice vsakega vtičnika Bootstrap je mogoče dostopati prek VERSIONlastnosti konstruktorja vtičnika. Na primer za vtičnik orodnih namigov:

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

Ni posebnih nadomestnih možnosti, ko je JavaScript onemogočen

Bootstrapovi vtičniki se ne vrnejo posebej elegantno, ko je JavaScript onemogočen. Če vam je mar za uporabniško izkušnjo v tem primeru, uporabite, <noscript>da svojim uporabnikom pojasnite situacijo (in kako znova omogočiti JavaScript) in/ali dodajte lastne nadomestne možnosti po meri.

Razkužilo

Namigi orodij in pojavni elementi uporabljajo naš vgrajeni čistilec za čiščenje možnosti, ki sprejemajo HTML.

Privzeta allowListvrednost je naslednja:

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

Če želite tej privzeti vrednosti dodati nove vrednosti allowList, lahko storite naslednje:

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)

Če želite zaobiti naš sanitizer, ker raje uporabljate namensko knjižnico, na primer DOMPurify , storite naslednje:

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