JavaScript

Individuale ose të përpiluara

Shtojcat mund të përfshihen individualisht (duke përdorur individualin e Bootstrap js/dist/*.js), ose të gjitha menjëherë duke përdorur bootstrap.jsose të minuar bootstrap.min.js(mos i përfshini të dyja).

Nëse përdorni një paketues (Webpack, Përmbledhje…), mund të përdorni /js/dist/*.jsskedarë që janë gati UMD.

Përdorimi i Bootstrap si modul

Ne ofrojmë një version të Bootstrap të ndërtuar si ESM( bootstrap.esm.jsdhe bootstrap.esm.min.js) i cili ju lejon të përdorni Bootstrap si një modul në shfletuesin tuaj, nëse shfletuesit tuaj të synuar e mbështesin atë .

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

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

varësitë

Disa shtojca dhe komponentë CSS varen nga shtojcat e tjera. Nëse përfshini shtojcat individualisht, sigurohuni që të kontrolloni për këto varësi në dokumente.

Zbritja, popover-et dhe këshillat tona të veglave varen gjithashtu nga Popper .

Ende dëshironi të përdorni jQuery? Eshte e mundur!

Bootstrap 5 është krijuar për t'u përdorur pa jQuery, por është ende e mundur të përdoren komponentët tanë me jQuery. Nëse Bootstrap zbulon jQuerynë windowobjekt , ai do të shtojë të gjithë komponentët tanë në sistemin e shtojcave të jQuery; kjo do të thotë që ju do të jeni në gjendje të bëni $('[data-bs-toggle="tooltip"]').tooltip()për të aktivizuar këshillat e veglave. E njëjta gjë vlen edhe për komponentët tanë të tjerë.

Atributet e të dhënave

Pothuajse të gjitha shtojcat e Bootstrap mund të aktivizohen dhe konfigurohen vetëm përmes HTML me atributet e të dhënave (mënyra jonë e preferuar për të përdorur funksionalitetin JavaScript). Sigurohuni që të përdorni vetëm një grup atributesh të dhënash në një element të vetëm (p.sh., nuk mund të aktivizoni një këshillë mjeti dhe modal nga i njëjti buton.)

Ngjarjet

Bootstrap ofron ngjarje të personalizuara për shumicën e veprimeve unike të shtojcave. Në përgjithësi, këto vijnë në një formë të paskajores dhe të paskajores - ku infinitivi (sh. show) shkaktohet në fillim të një ngjarjeje, dhe forma e tij e paskajores (p.sh. ) shownnxitet në përfundimin e një veprimi.

Të gjitha ngjarjet infinitive ofrojnë preventDefault()funksionalitet. Kjo siguron mundësinë për të ndaluar ekzekutimin e një veprimi përpara se të fillojë. Kthimi i "false" nga një mbajtës i ngjarjeve do të telefonojë gjithashtu automatikisht 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 programatike

Të gjithë konstruktorët pranojnë një objekt opsionesh opsionale ose asgjë (që fillon një shtojcë me sjelljen e tij të paracaktuar):

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

Nëse dëshironi të merrni një shembull të veçantë të shtojcës, secila shtojcë ekspozon një getInstancemetodë. Për ta marrë atë drejtpërdrejt nga një element, bëni këtë: bootstrap.Popover.getInstance(myPopoverEl).

Përzgjedhës CSS në konstruktorë

Ju gjithashtu mund të përdorni një përzgjedhës CSS si argumentin e parë në vend të një elementi DOM për të inicializuar shtojcën. Aktualisht elementi për shtojcën gjendet sipas querySelectormetodës pasi shtojcat tona mbështesin vetëm një element të vetëm.

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

Funksionet dhe tranzicionet asinkrone

Të gjitha metodat programatike API janë asinkrone dhe kthehen te thirrësi sapo të fillojë tranzicioni, por përpara se të përfundojë .

Për të ekzekutuar një veprim pasi të ketë përfunduar tranzicioni, mund të dëgjoni ngjarjen përkatëse.

var myCollapseEl = document.getElementById('myCollapse')

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

Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të shpërfillet .

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

Cilësimet e parazgjedhura

Ju mund të ndryshoni cilësimet e paracaktuara për një shtesë duke modifikuar Constructor.Defaultobjektin e shtojcës:

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

Asnjë konflikt (vetëm nëse përdorni jQuery)

Ndonjëherë është e nevojshme të përdoren shtojcat Bootstrap me korniza të tjera UI. Në këto rrethana, herë pas here mund të ndodhin përplasje të hapësirës së emrave. Nëse kjo ndodh, mund të telefononi .noConflictshtojcën që dëshironi të ktheni vlerën.

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

Numrat e versioneve

Versioni i secilës prej shtojcave të Bootstrap mund të aksesohet nëpërmjet VERSIONvetive të konstruktorit të shtojcave. Për shembull, për shtojcën e këshillës së veglave:

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

Nuk ka kthime të veçanta kur JavaScript është i çaktivizuar

Shtojcat e Bootstrap nuk kthehen veçanërisht me hijeshi kur JavaScript është i çaktivizuar. Nëse ju intereson përvoja e përdoruesit në këtë rast, përdorni <noscript>për të shpjeguar situatën (dhe si të riaktivizoni JavaScript) përdoruesve tuaj dhe/ose shtoni kthimet tuaja të personalizuara.

Dezinfektues

Këshillat e veglave dhe Popover-at përdorin dezinfektuesin tonë të integruar për të dezinfektuar opsionet që pranojnë HTML.

Vlera e paracaktuar allowListështë si më poshtë:

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

Nëse dëshironi të shtoni vlera të reja në këtë parazgjedhje allowList, mund të bëni sa më poshtë:

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)

Nëse dëshironi të anashkaloni dezinfektuesin tonë sepse preferoni të përdorni një bibliotekë të dedikuar, për shembull DOMPurify , duhet të bëni sa më poshtë:

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