JavaScript

Umntu ngamnye okanye uqokelelwe

Iiplagi zingabandakanywa ngokwazo (usebenzisa iBootstrap's individual js/dist/*.js), okanye zonke ngaxeshanye usebenzisa bootstrap.jsokanye iminified bootstrap.min.js(ungaquki zombini).

Ukuba usebenzisa i-bundler (i-Webpack, i-Rollup…), unokusebenzisa /js/dist/*.jsiifayile ezisele zilungile i-UMD.

Ukusebenzisa i-Bootstrap njengemodyuli

Sinikezela ngoguqulelo lweBootstrap eyakhiwe njenge ESM( bootstrap.esm.jskunye bootstrap.esm.min.js) ekuvumela ukuba usebenzise iBootstrap njengemodyuli kwisikhangeli sakho, ukuba iibhrawuza zakho ekujoliswe kuzo ziyayixhasa .

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

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

Ukuxhomekeka

Ezinye iiplagi kunye namalungu eCSS axhomekeke kwezinye iiplagi. Ukuba ubandakanya ii-plugins ngabanye, qiniseka ukuba ukhangele ezi zixhomekeke kumaxwebhu.

Iidrophu zethu, iipopovers kunye netooltips nazo zixhomekeke kwiPopper .

Usafuna ukusebenzisa ijQuery? Inokwenzeka!

I-Bootstrap 5 yenzelwe ukuba isetyenziswe ngaphandle kwejQuery, kodwa kusengenzeka ukusebenzisa amacandelo ethu ngejQuery. Ukuba iBootstrap ibhaqa jQuerykwintowindow iyakongeza onke amalungu ethu kwinkqubo yeplagi yejQuery ; oku kuthetha ukuba uya kukwazi ukwenza $('[data-bs-toggle="tooltip"]').tooltip()iingcebiso zesixhobo. Okufanayo kuya kwamanye amacandelo ethu.

Iimpawu zedatha

Phantse zonke iiplagi ze-Bootstrap zinokwenziwa kwaye ziqwalaselwe nge-HTML yodwa ngeempawu zedatha (indlela yethu esiyithandayo yokusebenzisa ukusebenza kweJavaScript). Qiniseka ukuba usebenzisa kuphela iseti enye yeempawu zedatha kwinto enye (umzekelo, awukwazi ukuvusa ingcebiso yesixhobo kunye nemodali ukusuka kwiqhosha elifanayo.)

Iziganeko

I-Bootstrap ibonelela ngeziganeko zesiko kwiintshukumo ezininzi ezizodwa zeeplagi. Ngokuqhelekileyo, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show) iqaliswa ekuqaleni kwesiganeko, kwaye imo yaso yexesha elidlulileyo ye-participle (umz. shown) ivuselelwe ekugqityweni kwesenzo.

Zonke iziganeko ezingapheliyo zibonelela preventDefault()ngokusebenza. Oku kubonelela ukukwazi ukumisa ukuphunyezwa kwesenzo phambi kokuba siqale. Ukubuyisa okungeyonyani kumphathi wesiganeko nako kuyakufowunela ngokuzenzekelayo 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

Bonke abakhi bamkela into ekhethiweyo yeenketho okanye akukho nto (eqalisa iplagin ngokuziphatha kwayo okungagqibekanga):

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

Ukuba ungathanda ukufumana umzekelo weplagin ethile, iplagin nganye iveza getInstanceindlela. Ukuze uyifumane ngokuthe ngqo kwinto, yenza oku: bootstrap.Popover.getInstance(myPopoverEl).

Abakhethi beCSS kubakhi

Ungasebenzisa kwakhona umkhethi we-CSS njengengxoxo yokuqala endaweni yesiqalelo se-DOM ukuqalisa iplagi. Okwangoku into yeplagin ifunyanwa querySelectoryindlela kuba iiplagi zethu zixhasa into enye kuphela.

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

Imisebenzi yeAsynchronous kunye notshintsho

Zonke iindlela zeprogram ye-API zi -asynchronous kwaye zibuyela kumnxeba xa utshintsho luqalisiwe kodwa ngaphambi kokuba luphele .

Ukuze wenze isenzo xa utshintsho lugqityiwe, ungamamela isiganeko esihambelanayo.

var myCollapseEl = document.getElementById('myCollapse')

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

Ukongeza umnxeba wendlela kwicandelo lotshintsho awuyi kuhoywa .

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

Useto oluhlala lukhona

Ungatshintsha useto olungagqibekanga lweplagi ngokulungisa Constructor.Defaultinto yeplagin:

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

Akukho ngquzulwano (kuphela ukuba usebenzisa i-jQuery)

Ngamanye amaxesha kuyimfuneko ukusebenzisa iiplagi ze-Bootstrap kunye nezinye izikhokelo ze-UI. Kwezi meko, ukungqubana kwesithuba segama kunokwenzeka ngamanye amaxesha. Ukuba oku kuyenzeka, .noConflictungafowunela iplagin onqwenela ukubuyisela ixabiso layo.

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

Amanani enguqulelo

Uguqulelo lweplagi nganye yeBootstrap inokufumaneka VERSIONngepropathi yomakhi weplagi. Umzekelo, kwi-plugin yengcebiso yesixhobo:

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

Akukho mpazamo zikhethekileyo xa iJavaScript ivaliwe

Iiplagi zeBootstrap azibuyeli ngasemva ngokukodwa xa iJavaScript ivaliwe. Ukuba unenkathalo ngamava omsebenzisi kule meko, sebenzisa <noscript>ukuchaza imeko (kunye nendlela yokwenza kwakhona iJavaScript) kubasebenzisi bakho, kunye/okanye ukongeza okwakho ukusilela.

Isicoci

Iingcebiso zezixhobo kunye neePopovers zisebenzisa isicoci esakhelwe ngaphakathi ukucoca iinketho ezamkela iHTML.

Ixabiso elimiselweyo allowListlilandelayo:

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

Ukuba ufuna ukongeza amaxabiso amatsha koku kungagqibekanga allowListungenza oku kulandelayo:

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)

Ukuba ufuna ukudlula kwi-sanitizer yethu kuba ukhetha ukusebenzisa ithala leencwadi elizinikeleyo, umzekelo DOMpurify , kuya kufuneka wenze oku kulandelayo:

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