JavaScript

Mumwe nemumwe kana kuunganidzwa

Mapulagi anogona kuverengerwa ega (uchishandisa Bootstrap's munhu js/dist/*.js), kana zvese kamwechete uchishandisa bootstrap.jskana minified bootstrap.min.js(usasanganise ese ari maviri).

Kana iwe ukashandisa bundler (Webpack, Rollup…), unogona kushandisa /js/dist/*.jsmafaera akagadzirira UMD.

Kushandisa Bootstrap semodule

Isu tinopa vhezheni yeBootstrap yakavakwa se ESM( bootstrap.esm.jsuye bootstrap.esm.min.js) iyo inokutendera kuti ushandise Bootstrap semodule mubrowser yako, kana mabhurawuza ako akatariswa akaitsigira .

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

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

Dependencies

Mamwe mapulagi uye CSS zvikamu zvinoenderana nemamwe mapulagi. Kana iwe ukasanganisira plugins wega, ita shuwa yekutarisa kune izvi zvinotsamira mumagwaro.

Kudonhedza kwedu, popovers uye matipi ekushandisa zvakare zvinoenderana nePopper .

Uchiri kuda kushandisa jQuery? Zvinogoneka!

Bootstrap 5 yakagadzirirwa kushandiswa pasina jQuery, asi zvichiri kugona kushandisa zvikamu zvedu nejQuery. Kana Bootstrap ikaona jQuerymuchinhu windowichawedzera zvese zvezvikamu zvedu mujQuery's plugin system; izvi zvinoreva kuti uchakwanisa kuita $('[data-bs-toggle="tooltip"]').tooltip()kugonesa matipi ekushandisa. Zvakafanana zvinoenda kune zvimwe zvikamu zvedu.

Data attribute

Anenge ese maBootstrap plugins anogona kugoneswa uye kugadziridzwa kuburikidza neHTML chete ane data hunhu (nzira yedu yatinoda yekushandisa JavaScript mashandiro). Iva nechokwadi chekushandisa seti imwe chete yedata hunhu pane chinhu chimwe chete (semuenzaniso, haugone kukonzeresa chetipi uye modal kubva pabhatani rimwechete.)

Zviitiko

Bootstrap inopa zviitiko zvetsika kune akawanda plugins 'akasarudzika zviito. Kazhinji, izvi zvinouya muchimiro chechirevo chisingaperi uye chekare - apo chisingaperi (ex. show) chinotangwa pakutanga kwechiitiko, uye chimiro chayo chechirevo chekare (ex. shown) chinotangwa pakupedzwa kwechiito.

Zvose zvisingagumi zviitiko zvinopa preventDefault()kushanda. Izvi zvinopa kugona kumisa kuitwa kwechiito chisati chatanga. Kudzorera nhema kubva kumubati wechiitiko kuchafonawo otomatiki 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...
})

Purogiramu yepurogiramu

Vese vavaki vanogamuchira sarudzo yesarudzo chinhu kana hapana (iyo inotanga plugin ine maitiro ayo akasarudzika):

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

Kana iwe uchida kuwana imwe plugin muenzaniso, imwe neimwe plugin inofumura getInstancenzira. Kuti uitore zvakananga kubva kune chimwe chinhu, ita izvi: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors mune vavaki

Unogonawo kushandisa CSS selector senharo yekutanga pachinzvimbo cheDOM element kutanga plugin. Parizvino chinhu cheplugin chinowanikwa querySelectornenzira sezvo maplugins edu achitsigira chinhu chimwe chete.

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

Asynchronous mabasa uye shanduko

Yese programmatic API nzira dzine asynchronous uye dzinodzokera kune anofona kana shanduko yatanga asi isati yapera .

Kuti uite chiito kana shanduko yapera, unogona kuteerera kune chiitiko chinoenderana.

var myCollapseEl = document.getElementById('myCollapse')

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

Pamusoro peiyo nzira yekufona pachikamu chekuchinja inozofuratirwa .

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

Default settings

Unogona kushandura zvigadziriso zveplugin nekugadzirisa chinhu cheplugin Constructor.Default:

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

Hapana kupokana (chete kana ukashandisa jQuery)

Dzimwe nguva zvinodikanwa kushandisa Bootstrap plugins nemamwe maUI maficha. Mumamiriro ezvinhu aya, kudhumhana kwemazita kunogona kuitika dzimwe nguva. Kana izvi zvikaitika, unogona kufonera .noConflictplugin yaunoda kudzorera kukosha kwayo.

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

Nhamba dzeshanduro

Iyo vhezheni yeimwe neimwe yeBootstrap's plugins inogona kuwanikwa kuburikidza VERSIONnemidziyo yemugadziri weplugin. Semuenzaniso, kune iyo tooltip plugin:

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

Hapana zvakakosha zvinodzokera kana JavaScript yakadzimwa

Bootstrap's plugins haidzoke kumashure zvakanyanya nenyasha kana JavaScript yakadzimwa. Kana iwe uine hanya neruzivo rwemushandisi mune iyi kesi, shandisa <noscript>kutsanangura mamiriro acho (uye maitiro ekuitazve JavaScript) kune vashandisi vako, uye/kana wedzera yako wega yekudonha.

Sanitizer

Maturusi uye Popovers anoshandisa yedu yakavakirwa-mukati sanitizer kuchenesa sarudzo dzinogamuchira HTML.

The default allowListvalue ndeiyi inotevera:

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

Kana iwe uchida kuwedzera hutsva hutsva kune iyi default allowListunogona kuita zvinotevera:

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)

Kana iwe uchida kupfuura yedu sanitizer nekuti unofarira kushandisa raibhurari yakatsaurirwa, semuenzaniso DOMpurify , unofanirwa kuita zvinotevera:

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