JavaScript

Munthu payekha kapena wophatikizidwa

Mapulagini amatha kuphatikizidwa payekhapayekha (pogwiritsa ntchito Bootstrap payekha js/dist/*.js), kapena zonse nthawi imodzi pogwiritsa ntchito bootstrap.jskapena minified bootstrap.min.js(musaphatikizepo zonse ziwiri).

Ngati mugwiritsa ntchito bundler (Webpack, Rollup…), mutha kugwiritsa ntchito /js/dist/*.jsmafayilo omwe ali okonzeka ku UMD.

Kugwiritsa ntchito Bootstrap ngati module

Timapereka mtundu wa Bootstrap womangidwa monga ESM( bootstrap.esm.jsndi bootstrap.esm.min.js) womwe umakupatsani mwayi wogwiritsa ntchito Bootstrap ngati gawo mu msakatuli wanu, ngati asakatuli omwe mukufuna amathandizira .

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

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

Zodalira

Mapulagini ena ndi zigawo za CSS zimadalira mapulagini ena. Ngati muphatikiza mapulagini payekhapayekha, onetsetsani kuti mwayang'ana zodalira izi mu ma docs.

Kutsitsa kwathu, popovers ndi zida zothandizira zimadaliranso Popper .

Mukufunabe kugwiritsa ntchito jQuery? Ndi zotheka!

Bootstrap 5 idapangidwa kuti izigwiritsidwa ntchito popanda jQuery, komabe ndizotheka kugwiritsa ntchito zida zathu ndi jQuery. Ngati Bootstrap izindikira jQuerymu windowchinthucho idzawonjezera zida zathu zonse mu jQuery's plugin system; izi zikutanthauza kuti mutha kuchita $('[data-bs-toggle="tooltip"]').tooltip()kuti mutsegule zida. Zomwezo zimapitanso ku zigawo zathu zina.

Makhalidwe a data

Pafupifupi mapulagini onse a Bootstrap amatha kuyatsidwa ndikukonzedwa kudzera mu HTML yokha ndi ma data (njira yomwe timakonda yogwiritsira ntchito JavaScript). Onetsetsani kuti mungogwiritsa ntchito gulu limodzi la data pachinthu chimodzi (mwachitsanzo, simungathe kuyambitsa chida ndi modal kuchokera pa batani lomwelo.)

Zochitika

Bootstrap imapereka zochitika zapadera pazochita zapadera za mapulagini ambiri. Nthawi zambiri, izi zimabwera mu mawonekedwe osamalizidwa komanso am'mbuyomu - pomwe mawu osamalitsa (mwachitsanzo. show) amayambika kumayambiriro kwa chochitika, ndipo mawonekedwe ake apitalo (mwachitsanzo. shown) amayambika akamaliza kuchitapo kanthu.

Zochitika zonse zopanda malire zimapereka preventDefault()magwiridwe antchito. Izi zimapereka kuthekera koyimitsa kuchitapo kanthu kusanayambe. Kubweza zabodza kuchokera kwa woyang'anira zochitika kudzayimbanso 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

Omanga onse amavomereza chinthu chosankha kapena ayi (chomwe chimayambitsa pulogalamu yowonjezera ndi machitidwe ake osakhazikika):

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

Ngati mukufuna kupeza pulogalamu yowonjezera, pulogalamu yowonjezera iliyonse imawonetsa getInstancenjira yake. Kuti mutenge mwachindunji kuchokera ku chinthu, chitani izi: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors mu omanga

Mutha kugwiritsanso ntchito chosankha cha CSS ngati mkangano woyamba m'malo mwa chinthu cha DOM kuti muyambitse pulogalamu yowonjezera. Panopa chinthu cha pulogalamu yowonjezera chimapezeka ndi querySelectornjira popeza mapulagini athu amathandizira chinthu chimodzi chokha.

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

Asynchronous ntchito ndi kusintha

Njira zonse zamapulogalamu a API ndizosasinthika ndipo zimabwerera kwa woyimbirayo pomwe kusintha kwayambika koma kusanathe .

Kuti muthe kuchitapo kanthu pakamaliza kusintha, mutha kumvera zomwe zikugwirizana.

var myCollapseEl = document.getElementById('myCollapse')

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

Kuphatikiza apo, kuyitana kwa njira pagawo losinthira sikudzanyalanyazidwa .

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

Zokonda zofikira

Mutha kusintha makonda a pulogalamu yowonjezera posintha chinthu cha pulogalamu yowonjezera Constructor.Default:

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

Palibe mkangano (pokhapokha mutagwiritsa ntchito jQuery)

Nthawi zina pamafunika kugwiritsa ntchito mapulagini a Bootstrap okhala ndi ma UI ena. Pazifukwa izi, kugunda kwa mayina kumachitika nthawi zina. Izi zikachitika, mutha kuyitanitsa pulogalamu yowonjezera .noConflictyomwe mukufuna kubwezeretsanso mtengo wake.

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

Nambala za mtundu

Mtundu wa mapulagini aliwonse a Bootstrap utha kupezeka kudzera VERSIONmuzopanga za pulogalamu yowonjezera. Mwachitsanzo, pa tooltip plugin:

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

Palibe zolakwika zapadera pomwe JavaScript yayimitsidwa

Mapulagini a Bootstrap samabwerera m'mbuyo mwachisomo pomwe JavaScript yazimitsidwa. Ngati mumasamala za ogwiritsa ntchito pankhaniyi, gwiritsani ntchito <noscript>kufotokoza momwe zinthu ziliri (ndi momwe mungayambitsirenso JavaScript) kwa ogwiritsa ntchito anu, ndi/kapena onjezani zolakwika zanu.

Sanitizer

Zida ndi Popovers amagwiritsa ntchito sanitizer yathu yopangira kuti ayeretse zosankha zomwe zimavomereza HTML.

Mtengo allowListwokhazikika ndi uwu:

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

Ngati mukufuna kuwonjezera ma values ​​atsopano pazosintha izi allowListmutha kuchita izi:

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)

Ngati mukufuna kulambalala sanitizer yathu chifukwa mumakonda kugwiritsa ntchito laibulale yodzipereka, mwachitsanzo DOMpurify , muyenera kuchita izi:

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