I-JavaScript

Ngamunye noma ihlanganiswe

Ama-plugin angafakwa ngawodwana (usebenzisa i-Bootstrap's individual js/dist/*.js), noma wonke ngesikhathi esisodwa usebenzisa bootstrap.jsnoma i-minified bootstrap.min.js(ungafaki kokubili).

Uma usebenzisa i-bundler (Webpack, Rollup…), ungasebenzisa /js/dist/*.jsamafayela aselungile nge-UMD.

Ukusebenzisa i-Bootstrap njengemojula

Sinikeza inguqulo ye-Bootstrap eyakhelwe njenge- ESM( bootstrap.esm.jskanye bootstrap.esm.min.js) ekuvumela ukuthi usebenzise i-Bootstrap njengemojula esipheqululini sakho, uma iziphequluli zakho eziqondiwe ziyisekela .

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

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

Ukuncika

Amanye ama-plugin nezingxenye ze-CSS zincike kwamanye ama-plugin. Uma ufaka ama-plugin ngawodwana, qiniseka ukuthi uhlola lokhu kuncika kumadokhumenti.

Okwehliswayo kwethu, ama-popover namathiphu amathuluzi nakho kuncike ku- Popper .

Usafuna ukusebenzisa i-jQuery? Kungenzeka!

I-Bootstrap 5 iklanyelwe ukusetshenziswa ngaphandle kwe-jQuery, kodwa kusengenzeka ukusebenzisa izingxenye zethu nge-jQuery. Uma i-Bootstrap ithola jQueryentweni windowizongeza zonke izingxenye zethu kusistimu ye-plugin ye-jQuery; lokhu kusho ukuthi uzokwazi ukwenza $('[data-bs-toggle="tooltip"]').tooltip()ukuze unike amandla izeluleko zamathuluzi. Okufanayo kuya kwezinye izingxenye zethu.

Izibaluli zedatha

Cishe wonke ama-plugin e-Bootstrap angavulwa futhi amiswe nge-HTML iyodwa ngezibaluli zedatha (indlela yethu esiyikhethayo yokusebenzisa ukusebenza kwe-JavaScript). Qiniseka ukuthi usebenzisa isethi eyodwa yezibaluli zedatha entweni eyodwa (isb, awukwazi ukucupha ithiphu yamathuluzi nemodali enkinobho efanayo.)

Imicimbi

I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo ezihlukile zama-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isb. show) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown) siqaliswa lapho kuqedwa isenzo.

Yonke imicimbi engapheli inikeza preventDefault()ukusebenza. Lokhu kunikeza ikhono lokumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale. Ukubuyisela amanga kusiphathi somcimbi nakho kuzoshaya ngokuzenzakalelayo 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...
})

I-Programmatic API

Bonke abakhi bamukela into oyikhethayo noma lutho (okuqala i-plugin ngokuziphatha kwayo okuzenzakalelayo):

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

Uma ungathanda ukuthola isibonelo esithile se-plugin, i-plugin ngayinye iveza getInstanceindlela. Ukuze uyithole ngokuqondile ku-elementi, yenza lokhu: bootstrap.Popover.getInstance(myPopoverEl).

Izikhethi ze-CSS kubakhi

Ungasebenzisa futhi isikhethi se-CSS njengengxabano yokuqala esikhundleni sesici se-DOM ukuze uqalise i-plugin. Okwamanje into ye-plugin itholwa querySelectorindlela njengoba ama-plugin ethu esekela into eyodwa kuphela.

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

Imisebenzi ye-Asynchronous kanye noshintsho

Zonke izindlela ze-API zohlelo azivumelanisi futhi zibuyela kofonayo uma uguquko seluqalile kodwa ngaphambi kokuthi luphele .

Ukuze wenze isenzo uma inguquko isiqedile, ungalalela umcimbi ohambisanayo.

var myCollapseEl = document.getElementById('myCollapse')

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

Ngaphezu kwalokho ikholi yendlela engxenyeni eguqukayo izozitshwa .

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

Izilungiselelo ezizenzakalelayo

Ungashintsha izilungiselelo ezizenzakalelayo ze-plugin ngokulungisa Constructor.Defaultinto ye-plugin:

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

Akukho ukungqubuzana (kuphela uma usebenzisa i-jQuery)

Kwesinye isikhathi kuyadingeka ukusebenzisa ama-plugin e-Bootstrap nezinye izinhlaka ze-UI. Kulezi zimo, ukungqubuzana kwendawo yamagama kungenzeka ngezikhathi ezithile. Uma lokhu kwenzeka, ungashayela .noConflicti-plugin ofisa ukubuyisela inani layo.

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

Izinombolo zenguqulo

Inguqulo ye-plugin ngayinye ye-Bootstrap ingafinyelelwa ngesakhiwo somakhi VERSIONwe-plugin. Isibonelo, nge-plugin yethiphu yamathuluzi:

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

Akukho okubuyela emuva okukhethekile uma i-JavaScript ivaliwe

Ama-plugin e-Bootstrap awabuyeli kahle ikakhulukazi uma i-JavaScript ivaliwe. Uma unendaba nolwazi lomsebenzisi kulesi simo, sebenzisa <noscript>ukuchaza isimo (nokuthi ungayenza kanjani i-JavaScript isebenze kabusha) kubasebenzisi bakho, kanye/noma wengeze okwakho okubuyela emuva ngokwezifiso.

I-Sanitizer

Amathuluzi nama-Popovers asebenzisa isicoci esakhelwe ngaphakathi ukuze sihlanze izinketho ezamukela i-HTML.

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

Uma ufuna ukwengeza amanani amasha kulokhu okumisiwe allowListungenza okulandelayo:

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)

Uma ufuna ukweqa isibulali magciwane sethu ngoba ukhetha ukusebenzisa umtapo wolwazi ozinikele, isibonelo DOMPurify , kufanele wenze okulandelayo:

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