JavaScript

Individuāli vai apkopoti

Spraudņus var iekļaut atsevišķi (izmantojot Bootstrap individuālo js/dist/*.js), vai visus uzreiz, izmantojot bootstrap.jsvai samazinātu bootstrap.min.js(neietveriet abus).

Ja izmantojat komplektētāju (Webpack, Rollup…), varat izmantot /js/dist/*.jsfailus, kas ir gatavi UMD.

Bootstrap izmantošana kā modulis

Mēs piedāvājam Bootstrap versiju, kas izveidota kā ESM( bootstrap.esm.jsun bootstrap.esm.min.js), kas ļauj izmantot Bootstrap kā moduli jūsu pārlūkprogrammā, ja jūsu atlasītās pārlūkprogrammas to atbalsta .

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

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

Atkarības

Daži spraudņi un CSS komponenti ir atkarīgi no citiem spraudņiem. Ja spraudņus iekļaujat atsevišķi, noteikti pārbaudiet, vai dokumentos nav šīs atkarības.

Mūsu nolaižamās izvēlnes, uznirstošie logi un rīka padomi ir atkarīgi arī no Popper .

Vai joprojām vēlaties izmantot jQuery? Tas ir iespējams!

Bootstrap 5 ir paredzēts lietošanai bez jQuery, taču joprojām ir iespējams izmantot mūsu komponentus ar jQuery. Ja Bootstrap objektā konstatē jQuery,window tas pievienos visus mūsu komponentus jQuery spraudņu sistēmā; tas nozīmē, ka varēsit $('[data-bs-toggle="tooltip"]').tooltip()iespējot rīka padomus. Tas pats attiecas uz citām mūsu sastāvdaļām.

Datu atribūti

Gandrīz visus Bootstrap spraudņus var iespējot un konfigurēt, izmantojot tikai HTML ar datu atribūtiem (mūsu vēlamais JavaScript funkcionalitātes izmantošanas veids). Noteikti izmantojiet tikai vienu datu atribūtu kopu vienam elementam (piemēram, jūs nevarat aktivizēt rīka padomu un modālu no vienas pogas).

Pasākumi

Bootstrap nodrošina pielāgotus notikumus lielākajai daļai spraudņu unikālo darbību. Parasti tie ir infinitīva un pagātnes divdabja formā — kur infinitīvs (piem. show) tiek aktivizēts notikuma sākumā, bet tā pagātnes divdabja forma (piem. shown) tiek aktivizēta pēc darbības pabeigšanas.

Visi infinitīvie notikumi nodrošina preventDefault()funkcionalitāti. Tas nodrošina iespēju apturēt darbības izpildi pirms tās sākšanas. Atgriežot false no notikumu apstrādātāja, automātiski tiks izsaukts arī 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...
})

Programmatiskā API

Visi konstruktori pieņem izvēles opciju objektu vai neko (kas iniciē spraudni ar tā noklusējuma darbību):

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

Ja vēlaties iegūt konkrētu spraudņa gadījumu, katrs spraudnis atklāj getInstancemetodi. Lai to izgūtu tieši no elementa, rīkojieties šādi: bootstrap.Popover.getInstance(myPopoverEl).

CSS atlasītāji konstruktoros

Varat arī izmantot CSS atlasītāju kā pirmo argumentu, nevis DOM elementu, lai inicializētu spraudni. Pašlaik spraudņa elements tiek atrasts ar querySelectormetodi, jo mūsu spraudņi atbalsta tikai vienu elementu.

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

Asinhronās funkcijas un pārejas

Visas programmatiskās API metodes ir asinhronas un atgriežas pie zvanītāja, kad pāreja ir sākta, bet pirms tās beigām .

Lai veiktu darbību, kad pāreja ir pabeigta, varat noklausīties atbilstošo notikumu.

var myCollapseEl = document.getElementById('myCollapse')

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

Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

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

Noklusējuma iestatījumi

Varat mainīt spraudņa noklusējuma iestatījumus, modificējot spraudņa Constructor.Defaultobjektu:

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

Nav konfliktu (tikai tad, ja izmantojat jQuery)

Dažreiz ir nepieciešams izmantot Bootstrap spraudņus ar citiem lietotāja interfeisa ietvariem. Šādos apstākļos dažkārt var rasties nosaukumtelpas sadursmes. Ja tā notiek, varat izsaukt .noConflictspraudni, kura vērtību vēlaties atjaunot.

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

Versiju numuri

Katra Bootstrap spraudņa versijai var piekļūt, izmantojot VERSIONspraudņa konstruktora īpašumu. Piemēram, rīka padoma spraudnim:

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

Nav īpašu atkāpšanās gadījumu, ja JavaScript ir atspējots

Bootstrap spraudņi nav īpaši graciozi, ja JavaScript ir atspējots. Ja jums rūp lietotāja pieredze šajā gadījumā, izmantojiet <noscript>, lai izskaidrotu situāciju (un kā atkārtoti iespējot JavaScript) saviem lietotājiem un/vai pievienojiet savus pielāgotos atkāpšanās variantus.

Dezinficētājs

Rīka padomi un uznirstošie elementi izmanto mūsu iebūvēto dezinfekcijas līdzekli, lai dezinficētu opcijas, kas pieņem HTML.

Noklusējuma allowListvērtība ir šāda:

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

Ja šim noklusējumam vēlaties pievienot jaunas vērtības, allowListvarat rīkoties šādi:

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)

Ja vēlaties apiet mūsu dezinfekcijas līdzekli, jo vēlaties izmantot īpašu bibliotēku, piemēram , DOMpurify , rīkojieties šādi:

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