JavaScript

Motho ka mong kapa a kopantswe

Li-plugins li ka kenyeletsoa ka bonngoe (ho sebelisa Bootstrap ka bomong js/dist/*.js), kapa kaofela ka nako e le 'ngoe li sebelisa bootstrap.jskapa tse entsoeng bootstrap.min.js(o se kenyelletse ka bobeli).

Haeba u sebelisa bundler (Webpack, Rollup…), u ka sebelisa /js/dist/*.jslifaele tse seng li loketse UMD.

Ho sebelisa Bootstrap joalo ka mojule

Re fana ka mofuta oa Bootstrap o hahiloeng e le ESM( bootstrap.esm.jsle bootstrap.esm.min.js) o u lumellang ho sebelisa Bootstrap joalo ka mojule ho sebatli sa hau, haeba libatli tseo u li shebileng li e tšehetsa .

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

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

Ho itšetleha

Li-plugins tse ling le likarolo tsa CSS li itšetlehile ka li-plugins tse ling. Haeba u kenyelletsa li-plugins ka bonngoe, etsa bonnete ba hore u hlahloba litšepiso tsena ho litokomane.

Li-dropdown tsa rona, popovers le lisebelisoa tsa lisebelisoa le tsona li itšetlehile ka Popper .

U ntse u batla ho sebelisa jQuery? Hoa khoneha!

Bootstrap 5 e etselitsoe ho sebelisoa ntle le jQuery, empa ho ntse ho khoneha ho sebelisa likarolo tsa rona ka jQuery. Haeba Bootstrap e lemoha jQuerynthong windowe tla eketsa likarolo tsohle tsa rona ho jQuery's plugin system; sena se bolela hore o tla khona ho etsa $('[data-bs-toggle="tooltip"]').tooltip()ho nolofalletsa lisebelisoa tsa lisebelisoa. Ho joalo le ka likarolo tse ling tsa rona.

Litšobotsi tsa data

Hoo e ka bang li-plugins tsohle tsa Bootstrap li ka nolofalloa le ho hlophisoa ka HTML feela ka lintlha tsa data (mokhoa oo re o ratang oa ho sebelisa ts'ebetso ea JavaScript). Etsa bonnete ba hore o sebelisa feela sete e le 'ngoe ea litšobotsi tsa data nthong e le' ngoe (mohlala, u ke ke ua qala sesebelisoa le modal ho tsoa konopo e le 'ngoe.)

Liketsahalo

Bootstrap e fana ka liketsahalo tsa tloaelo bakeng sa liketso tse ikhethang tsa li-plugins. Ka kakaretso, tsena li tla ka mokhoa o sa feleng le oa nako e fetileng - moo lentsoe le sa feleng (mohlala. show) le qalisoang qalong ea ketsahalo, 'me sebopeho sa eona sa nako e fetileng sa karolo (mohl. shown) se hlahisoang ha ketso e phethoa.

Liketsahalo tsohle tse sa feleng li fana ka preventDefault()ts'ebetso. Sena se fana ka bokhoni ba ho emisa ts'ebetso ea ketso pele e qala. Ho khutlisa leshano ho tsoa ho mohlokomeli oa liketsahalo ho tla letsetsa hape ka bohona 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...
})

Programmatic API

Bahahi bohle ba amohela ntho ea boikhethelo kapa letho (e qalang plugin ka boitšoaro ba eona ba kamehla):

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

Haeba u ka rata ho fumana mohlala o itseng oa plugin, plugin ka 'ngoe e hlahisa getInstancemokhoa. Bakeng sa ho e fumana ka kotloloho ho tsoa ho element, etsa sena: bootstrap.Popover.getInstance(myPopoverEl).

Bakhethoa ba CSS ho bahahi

U ka sebelisa sekhetho sa CSS joalo ka khang ea pele ho fapana le ntho ea DOM ho qala plugin. Hajoale karolo ea plugin e fumanoa ke querySelectormokhoa kaha li-plugins tsa rona li tšehetsa ntho e le 'ngoe feela.

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

Mesebetsi ea Asynchronous le liphetoho

Mekhoa eohle ea mananeo a API ha e lumellane 'me e khutlela ho motho ea letsetsang hang ha phetoho e qala empa pele e fela .

E le hore u phethe ketso hang ha phetoho e felile, u ka mamela ketsahalo e tsamaisanang le eona.

var myCollapseEl = document.getElementById('myCollapse')

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

Ho feta moo, mohala oa mokhoa oa karolo ea phetoho o tla hlokomolohuoa .

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

Litlhophiso tsa kamehla

U ka fetola litlhophiso tsa kamehla tsa plugin ka ho fetola Constructor.Defaultntho ea plugin:

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

Ha ho likhohlano (ha feela u sebelisa jQuery)

Ka linako tse ling hoa hlokahala ho sebelisa li-plugins tsa Bootstrap tse nang le meralo e meng ea UI. Maemong ana, ka linako tse ling ho ka ba le likhohlano tsa sebaka sa mabitso. Haeba sena se etsahala, u ka bitsa .noConflictplugin u lakatsa ho khutlisetsa boleng ba.

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

Linomoro tsa phetolelo

Mofuta oa e 'ngoe le e' ngoe ea li-plugins tsa Bootstrap e ka fumaneha ka VERSIONthepa ea sehahi sa plugin. Ka mohlala, bakeng sa plugin ea tooltip:

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

Ha ho na liphoso tse ikhethileng ha JavaScript e koetsoe

Li-plugins tsa Bootstrap ha li khutlele morao haholo ha JavaScript e koetsoe. Haeba u tsotella boiphihlelo ba mosebelisi ntlheng ena, sebelisa <noscript>ho hlalosa boemo (le mokhoa oa ho lumella JavaScript hape) ho basebelisi ba hau, le/kapa eketsa liphoso tsa hau tsa tloaelo.

Sanitizer

Lisebelisoa le li-Popovers li sebelisa sanitizer ea rona e hahelletsoeng ka hare ho hloekisa likhetho tse amohelang HTML.

Boleng ba kamehla allowListke bo latelang:

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

Haeba u batla ho eketsa boleng bo bocha sebakeng sena sa kamehla allowListu ka etsa tse latelang:

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)

Haeba u batla ho qoba sanitizer ea rona hobane u khetha ho sebelisa laeborari e inehetseng, mohlala DOMpurify , u lokela ho etsa se latelang:

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