JavaScript

Kesane an berhevkirî

Pêvek dikarin bi rengek ferdî (bi ferdî ya Bootstrap bikar bînin js/dist/*.js), an hemî bi yekcarî bikar bînin bootstrap.jsan jî kêm bikin bootstrap.min.js(herduyan tê de nekin).

Ger hûn bundlerek bikar bînin (Webpack, Rollup…), hûn dikarin /js/dist/*.jspelên ku UMD amade ne bikar bînin.

Bikaranîna Bootstrap wekî modulek

Em guhertoyek Bootstrap-ê ku wekî ESM( bootstrap.esm.jsû bootstrap.esm.min.js) hatî çêkirin peyda dikin ku destûrê dide te ku hûn Bootstrap-ê wekî modulek di geroka xwe de bikar bînin, ger gerokên we yên armanckirî piştgirî bikin .

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

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

Dependencies

Hin pêvek û hêmanên CSS bi pêvekên din ve girêdayî ne. Ger hûn pêvekên kesane bi nav bikin, pê ewle bin ku hûn van girêdanan di belgeyan de kontrol bikin.

Daxistina me, popover û serişteyên amûran jî bi Popper ve girêdayî ne.

Hîn jî hûn dixwazin jQuery bikar bînin? Gengaz e!

Bootstrap 5 hatiye dîzaynkirin ku bêyî jQuery were bikar anîn, lê dîsa jî gengaz e ku em hêmanên xwe bi jQuery re bikar bînin. Ger Bootstrap di objektê de jQuerybibînewindow ew ê hemî pêkhateyên me di pergala pêveka jQuery de zêde bike; ev tê vê wateyê ku hûn ê bikaribin bikin $('[data-bs-toggle="tooltip"]').tooltip()ku serişteyên amûran çalak bikin. Heman tişt ji bo pêkhateyên me yên din jî derbas dibe.

Taybetmendiyên daneyê

Hema hema hemî pêvekên Bootstrap dikarin tenê bi navgîniya HTML-ê ve bi taybetmendiyên daneyê ve werin çalak kirin û mîheng kirin (rêya meya bijarte ya karanîna fonksiyona JavaScriptê). Bawer bikin ku hûn tenê komek taybetmendiyên daneyê li ser hêmanek yekane bikar bînin (mînak, hûn nekarin ji heman bişkokê şîretek amûrek û modalek derxînin.)

Events

Bootstrap ji bo çalakiyên yekta yên piraniya pêvekan bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û paşverû têne - ku di destpêka bûyerekê de nefsbiçûk (mînak. show) di destpêka bûyerekê de, û forma wê ya dema borî (mînak. shown) bi qedandina kirdeyekê tê derxistin.

Hemî bûyerên bêdawî preventDefault()fonksiyonê peyda dikin. Ev şiyana rawestandina pêkanîna çalakiyek berî ku ew dest pê bike peyda dike. Vegerandina derewîn ji rêvekerek bûyerê dê bixweber jî bang preventDefault()bike.

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 bername

Hemî çêker hêmanek vebijarkî an tiştek qebûl dikin (ya ku pêvekek bi tevgera xweya xwerû dest pê dike):

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

Heke hûn dixwazin mînakek pêvekek taybetî bistînin, her pêvek getInstancerêbazek eşkere dike. Ji bo ku hûn wê rasterast ji hêmanek bistînin, vê yekê bikin bootstrap.Popover.getInstance(myPopoverEl):.

Hilbijêrên CSS di çêkeran de

Her weha hûn dikarin hilbijêrek CSS-ê wekî argumana yekem li şûna hêmanek DOM-ê bikar bînin da ku pêvekê bidin destpêkirin. Niha hêmana pêvekê bi querySelectorrêbazê tê dîtin ji ber ku pêvekên me tenê yek elementek piştgirî dikin.

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

Fonksiyonên Asynchronous û veguherînan

Hemî rêbazên API-ya bernamesaz asînkron in û piştî ku veguheztin dest pê kir lê berî ku biqede vedigerin bangker .

Ji bo ku hûn gava veguheztinê qediya çalakiyek pêk bînin, hûn dikarin bûyera têkildar guhdarî bikin.

var myCollapseEl = document.getElementById('myCollapse')

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

Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

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

Mîhengên xwerû

Hûn dikarin mîhengên xwerû ji bo pêvekê bi guheztina Constructor.Defaulttiştê pêvekê biguhezînin:

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

Nakokî tune (tenê heke hûn jQuery bikar bînin)

Carinan hewce ye ku pêvekên Bootstrap bi çarçoveyên UI yên din re bikar bînin. Di van şertan de, car caran dibe ku pevçûnên navan çêbibin. Ger ev diqewime, hûn dikarin gazî .noConflictpêveka ku hûn dixwazin nirxa wê vegerînin bikin.

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

Hejmarên Versiyon

Guhertoya her yek ji pêvekên Bootstrap dikare bi navgîniya avakera VERSIONpêvekê ve were gihîştin. Mînakî, ji bo pêveka tooltip:

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

Dema ku JavaScript neçalak be paşveçûnek taybetî tune

Pêvekên Bootstrap dema ku JavaScript neçalak be bi taybetî bi dilşikestî paşve naçin. Heke hûn di vê rewşê de ji ezmûna bikarhêner eleqedar dibin, bikar bînin <noscript>ku rewşê (û çawa JavaScript-ê ji nû ve çalak bikin) ji bikarhênerên xwe re rave bikin, û/an jî paşverûyên xweyên xwerû lê zêde bikin.

Sanitizer

Tooltips û Popovers paqijkera me ya çêkirî bikar tînin da ku vebijarkên ku HTML-ê qebûl dikin paqij bikin.

Nirxa allowListxwerû ev e:

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

Heke hûn dixwazin nirxên nû li vê xwerû allowListzêde bikin, hûn dikarin jêrîn bikin:

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)

Heke hûn dixwazin paqijkerê me derbas bikin ji ber ku hûn tercîh dikin ku pirtûkxaneyek taybetî bikar bînin, mînakî DOMPurify , divê hûn jêrîn bikin:

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