JavaScript

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.

Go diriša Bootstrap bjalo ka modula

Re fana ka phetolelo ya Bootstrap yeo e agilwego bjalo ka ESM( bootstrap.esm.jsle bootstrap.esm.min.js) yeo e go dumelelago go šomiša Bootstrap bjalo ka modula ka go sephephediši sa gago, ge e le gore diphensele tša gago tšeo di nepišitšwego di e thekga .

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

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

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šeo di ithekgilego ka tšona ka go di-doc.

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

O sa nyaka go diriša jQuery? Go a kgonega!

Bootstrap 5 e reretšwe go dirišwa ntle le jQuery, eupša go sa dutše go kgonega go diriša dikarolo tša rena ka jQuery. Ge e ba Bootstrap e lemoga jQueryka gare ga windowselo e tla oketša dikarolo tša rena ka moka ka tshepedišong ya plugin ya jQuery; se se ra gore o tla kgona go dira $('[data-bs-toggle="tooltip"]').tooltip()go kgontšha ditšhišinyo tša didirišwa. Go bjalo le ka dikarolo tša rena tše dingwe.

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

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().

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 ya lenaneo

Baagi ka moka ba amogela selo sa dikgetho tša boikhethelo goba ga go selo (seo se thomago plugin ka boitshwaro bja yona bja go se fetoge):

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

Ge o rata go hwetša mohlala wo o itšego wa plugin, plugin ye nngwe le ye nngwe e pepentšha getInstancemokgwa. Gore o kgone go e hwetša thwii go tšwa go elemente, dira se: bootstrap.Popover.getInstance(myPopoverEl).

Bakgethi ba CSS ka gare ga baagi

O ka šomiša gape le mokgethi wa CSS bjalo ka ngangišano ya mathomo go e na le elemente ya DOM go thoma plugin. Ga bjale elemente ya plugin e hwetšwa ka querySelectormokgwa ka ge diplugin tša rena di thekga elemente e tee fela.

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

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.

var myCollapseEl = document.getElementById('myCollapse')

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

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

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

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:

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

Ga go na thulano (feela ge o šomiša jQuery) .

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 Bootstrap e ka fihlelelwa ka VERSIONthepa ya moagi wa plugin. Ka mohlala, bakeng sa plugin ya tooltip:

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

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.

Sedirišwa sa go hlwekiša

Tooltips le Popovers sebelisa rona a haha-ka sanitizer ho sanitize dikgetho tse amohelang HTML.

Boleng bja go se fetoge allowListke bjo bo latelago:

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

Ge o nyaka go oketša dikelo tše mpsha go tlwaelo ye allowListo ka dira tše di latelago:

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)

Ge e ba o nyaka go tlola sanitizer ya rena ka gobane o rata go diriša bokgobapuku bjo bo kgethegilego, mohlala DOMPurify , o swanetše go dira tše di latelago:

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