JavaScript

Bi pêvekên me yên bijarte yên JavaScript-ê yên ku li ser jQuery-yê hatine çêkirin, Bootstrap bidin jiyîn. Li ser her pêvek, daneyên me û vebijarkên API-ya bernamekirî, û bêtir fêr bibin.

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.

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. Di heman demê de bala xwe bidin ku hemî pêvek bi jQuery ve girêdayî ne (ev tê vê wateyê ku jQuery divê berî pelên pêvekê were nav kirin). Bi me re şêwirpackage.json bikin ku bibînin ka kîjan guhertoyên jQuery têne piştgirî kirin.

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

Taybetmendiyên daneyê

Hema hema hemî pêvekên Bootstrap-ê tenê bi taybetmendiyên daneyê (rêbaza meya bijarte ya karanîna fonksiyona JavaScript-ê) bi navgîniya HTML-ê ve têne çalak kirin û mîheng kirin. 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.)

Lêbelê, di hin rewşan de dibe ku were xwestin ku vê fonksiyonê neçalak bike. Ji bo neçalakkirina taybetmendiya daneyê API-ê, hemî bûyerên li ser navên belgeyê bi data-apivî rengî veqetînin:

$(document).off('.data-api')

Wekî din, ji bo armanckirina pêvekek taybetî, tenê navê pêvekê wekî navek bi navgîniya daneya-api re bi vî rengî têxin nav:

$(document).off('.alert.data-api')

Events

Bootstrap ji bo kiryarên yekta yên pir pêvekan bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û dema borî 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 temamkirina kiryarekê 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.

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API bername

Em her weha bawer dikin ku hûn dikarin hemî pêvekên Bootstrap bi tenê bi navgîniya JavaScript API-ê bikar bînin. Hemî API-yên gelemperî rêbazên yekane, zincîrbar in, û berhevoka ku li ser hatî kirin vedigerînin.

$('.btn.danger').button('toggle').addClass('fat')

Pêdivî ye ku hemî rêbaz hêmanek vebijarkek vebijarkî, rêzek ku rêbazek taybetî armanc dike, an tiştek (ya ku pêvekek bi tevgerek xwerû dest pê dike) qebûl bikin:

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Her pêvek di heman demê de çêkerê xwe yê xav li ser Constructortaybetmendiyek eşkere dike: $.fn.popover.Constructor. Heke hûn dixwazin mînakek pêvekek taybetî bistînin, wê rasterast ji hêmanek bistînin: $('[rel="popover"]').data('popover').

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.

$('#myCollapse').on('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.

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('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
$.fn.modal.Constructor.Default.keyboard = false

Nakokî tune

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 jQuery yên Bootstrap dikare bi navgîniya avakera VERSIONpêvekê ve were gihîştin. Mînakî, ji bo pêveka tooltip:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

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>da 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.

Util

Hemî pelên JavaScript-ê yên Bootstrap girêdayî ye util.jsû pêdivî ye ku ew bi pelên din ên JavaScript-ê re were vehewandin. Heke hûn berhevkirî (an kêmkirî) bikar tînin bootstrap.js, ne hewce ye ku hûn vê yekê têxin nav xwe - ew jixwe li wir e.

util.jsfonksiyonên bikêr û arîkarek bingehîn ji bo transitionEndbûyeran û her weha emulatorek veguherîna CSS-ê vedihewîne. Ew ji hêla pêvekên din ve tê bikar anîn da ku piştgiriya veguheztina CSS-ê kontrol bike û veguheztinên daleqandî bigire.

Sanitizer

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

Nirxa whiteListxwerû ev e:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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û whiteListzêde bikin, hûn dikarin jêrîn bikin:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].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:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})