JavaScript

Tliša Bootstrap bophelong ka di-plugin tša rena tša JavaScript tša boikhethelo tšeo di agilwego go jQuery. Ithute ka plugin e nngwe le e nngwe, dikgetho tša rena tša data le tša lenaneo la API, le tše dingwe.

Motho ka o tee ka o tee goba e kgobokeditšwego

Di-plugin di ka akaretšwa ka botee (go diriša Bootstrap’s individual js/dist/*.js), goba ka moka ka nako e tee di diriša bootstrap.jsgoba tšeo di fokoditšwego bootstrap.min.js(o se ke wa akaretša ka bobedi).

Ge o šomiša bundler (Webpack, Rollup...), o ka šomiša /js/dist/*.jsdifaele tšeo di lokilego UMD.

Ditshepetšo tša go ithekga

Di-plugin tše dingwe le dikarolo tša CSS di ithekgile ka di-plugin tše dingwe. Ge o akaretša di-plugin ka botee, kgonthiša gore o hlahloba dilo tše tša go ithekga ka go di-doc. Gape ela hloko gore di-plugin ka moka di ithekgile ka jQuery (se se ra gore jQuery e swanetše go akaretšwa pele ga difaele tša di-plugin). Bona ya renapackage.json go bona gore ke diphetolelo dife tša jQuery tšeo di thekgwago.

Di-dropdown tša rena, di-popover le di-tooltips le tšona di ithekgile ka Popper.js .

Dika tša datha

Mo e nyakilego go ba di-plugin ka moka tša Bootstrap di ka kgontšhwa le go beakanywa ka HTML e nnoši ka dika tša data (tsela ya rena yeo re e ratago ya go diriša mošomo wa JavaScript). Kgonthiša gore o šomiša fela sete e tee ya dika tša datha go elemente e tee (mohlala, o ka se kgone go hlohleletša keletšo ya sedirišwa le modal go tšwa go konope ye e swanago.)

Le ge go le bjalo, maemong a mangwe go ka ba mo go kganyogegago go šitiša mošomo wo. Go šitiša API ya seka sa datha, tloša ditiragalo ka moka go tokumente yeo e beilwego sekgoba sa maina ka data-apigo swana le bjalo:

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

Ka go fapana le moo, go nepiša plugin ye e itšego, akaretša fela leina la plugin bjalo ka sekgoba sa maina gotee le sekgoba sa maina sa data-api bjalo ka se:

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

Ditiragalo

Bootstrap e fana ka ditiragalo tša tlwaelo bakeng sa bontši bja ditiro tše di kgethegilego tša di-plugin. Ka kakaretšo, tše di tla ka mokgwa wa go se fele le wa lediri la nakong ye e fetilego - moo lediri la go se fele (ex. show) le hlohleletšwago mathomong a tiragalo, gomme sebopego sa lona sa lediri la nakong ye e fetilego (ex. shown) se hlohleletšwa ge tiro e phethilwe.

Ditiragalo ka moka tša go se fele di fa preventDefault()mošomo. Se se fa bokgoni bja go emiša phethagatšo ya tiro pele e thoma. Go bušetša maaka go tšwa go modiriši wa tiragalo le gona go tla bitša ka go iketla preventDefault().

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

API ya lenaneo

Re dumela gape gore o swanetše go kgona go diriša di-plugin ka moka tša Bootstrap feela ka JavaScript API. Di-API ka moka tša setšhaba ke mekgwa e tee, yeo e ka tsenywago diketane, gomme e bušetša kgoboketšo yeo e dirilwego ka yona.

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

Mekgwa ka moka e swanetše go amogela selo sa dikgetho tša boikhethelo, thapo yeo e nepišago mokgwa wo o itšego, goba go se be le selo (yeo e thomago polaka ka boitshwaro bja go se fetoge):

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

Plugin ye nngwe le ye nngwe gape e pepentšha moagi wa yona wo tala godimo ga Constructorthepa: $.fn.popover.Constructor. Ge o rata go hwetša mohlala wo o itšego wa plugin, o e bušetše thwii go tšwa go elemente: $('[rel="popover"]').data('popover').

Mešomo ya asynchronous le diphetogo

Mekgwa ka moka ya lenaneo la API ga e na asynchronous gomme e boela go mogala ge phetogo e thomile eupša pele e fela .

Gore o kgone go phethagatša tiro ge phetogo e fedile, o ka theeletša tiragalo ye e swanetšego.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

Go tlaleletša pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#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 !!

Dipeakanyo tša go se fetoge

O ka fetola dipeakanyo tša go se fetoge tša plugin ka go fetoša Constructor.Defaultselo sa plugin:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Ga go na thulano

Ka dinako tše dingwe go a nyakega go diriša di-plugin tša Bootstrap le ditlhako tše dingwe tša UI. Maemong a, dithulano tša sekgoba sa maina di ka direga ka dinako tše dingwe. Ge se se direga, o ka bitša .noConflictplugin yeo o nyakago go bušetša boleng bja yona.

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

Dinomoro tša phetolelo

Phetolelo ya e nngwe le e nngwe ya di-plugin tša jQuery tša Bootstrap e ka fihlelelwa ka VERSIONthepa ya moagi wa plugin. Ka mohlala, bakeng sa plugin ya tooltip:

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

Ga go na di-fallback tše di kgethegilego ge JavaScript e šitišitšwe

Di-plugin tša Bootstrap ga di we morago ka mo go kgethegilego ka mogau ge JavaScript e šitišitšwe. Ge e le gore o na le taba le maitemogelo a modiriši tabeng ye, šomiša <noscript>go hlaloša seemo (le ka moo o ka kgontšhago JavaScript gape) go badiriši ba gago, le/goba go oketša di-fallback tša gago tša tlwaelo.

Util

Difaele ka moka tša JavaScript tša Bootstrap di ithekgile ka util.jsgomme e swanetše go akaretšwa gotee le difaele tše dingwe tša JavaScript. If you’re using the compiled (or minified) bootstrap.js, ga go nyakege gore o akaretše se—se šetše se le gona.

util.jse akaretša mešomo ya mohola le mothuši wa motheo wa transitionEndditiragalo gammogo le sedirišwa sa go ekiša phetogo ya CSS. E šomišwa ke di-plugin tše dingwe go lekola thekgo ya phetogo ya CSS le go swara diphetogo tše di fegilwego.