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ša go ithekga ka go di-doc.

Di-dropdown tša rena, di-popover le didirišwa tša go thuša 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 API ya lenaneo 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) .

Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

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

Version numbers

The version of each of Bootstrap’s plugins can be accessed via the VERSION property of the plugin’s constructor. For example, for the tooltip plugin:

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

No special fallbacks when JavaScript is disabled

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

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