JavaScript

Indibidwal o pinagsama-sama

Maaaring isama ang mga plugin nang isa-isa (gamit ang indibidwal na Bootstrap js/dist/*.js), o sabay-sabay gamit bootstrap.jso ang minified bootstrap.min.js(huwag isama ang pareho).

Kung gumagamit ka ng isang bundler (Webpack, Rollup...), maaari kang gumamit ng /js/dist/*.jsmga file na nakahanda sa UMD.

Paggamit ng Bootstrap bilang isang module

Nagbibigay kami ng bersyon ng Bootstrap na binuo bilang ESM( bootstrap.esm.jsat bootstrap.esm.min.js) na nagbibigay-daan sa iyong gamitin ang Bootstrap bilang module sa iyong browser, kung sinusuportahan ito ng iyong mga naka-target na browser .

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

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

Dependencies

Ang ilang mga plugin at mga bahagi ng CSS ay nakasalalay sa iba pang mga plugin. Kung isa-isa kang magsasama ng mga plugin, tiyaking suriin ang mga dependency na ito sa mga doc.

Ang aming mga dropdown, popover at tooltip ay nakadepende rin sa Popper .

Gusto pa ring gumamit ng jQuery? Posible!

Ang Bootstrap 5 ay idinisenyo upang magamit nang walang jQuery, ngunit posible pa ring gamitin ang aming mga bahagi sa jQuery. Kung nakita ng Bootstrap jQueryang windowobject , idaragdag nito ang lahat ng aming mga bahagi sa sistema ng plugin ng jQuery; nangangahulugan ito na magagawa mo $('[data-bs-toggle="tooltip"]').tooltip()upang paganahin ang mga tooltip. Ang parehong napupunta para sa aming iba pang mga bahagi.

Mga katangian ng data

Halos lahat ng mga plugin ng Bootstrap ay maaaring paganahin at i-configure sa pamamagitan ng HTML lamang na may mga katangian ng data (ang aming gustong paraan ng paggamit ng paggana ng JavaScript). Tiyaking gumamit lamang ng isang hanay ng mga katangian ng data sa isang elemento (hal., hindi ka makakapag-trigger ng tooltip at modal mula sa parehong button.)

Mga kaganapan

Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa mga natatanging pagkilos ng karamihan sa mga plugin. Sa pangkalahatan, ang mga ito ay dumating sa isang infinitive at past participle form - kung saan ang infinitive (hal. show) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown) ay na-trigger sa pagkumpleto ng isang aksyon.

Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefault()functionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula. Ang pagbabalik ng false mula sa isang event handler ay awtomatikong tatawag 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

Lahat ng mga konstruktor ay tumatanggap ng opsyonal na bagay na opsyon o wala (na nagpasimula ng isang plugin na may default na gawi nito):

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

Kung gusto mong makakuha ng partikular na instance ng plugin, ang bawat plugin ay naglalantad ng getInstanceparaan. Upang makuha ito nang direkta mula sa isang elemento, gawin ito: bootstrap.Popover.getInstance(myPopoverEl).

Mga tagapili ng CSS sa mga konstruktor

Maaari ka ring gumamit ng CSS selector bilang unang argumento sa halip na isang elemento ng DOM upang simulan ang plugin. Sa kasalukuyan, ang elemento para sa plugin ay matatagpuan sa querySelectorpamamaraan dahil ang aming mga plugin ay sumusuporta sa isang elemento lamang.

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

Mga asynchronous na function at transition

Ang lahat ng mga pamamaraan ng programmatic API ay asynchronous at bumalik sa tumatawag kapag nagsimula ang paglipat ngunit bago ito matapos .

Upang maisagawa ang isang aksyon kapag nakumpleto na ang paglipat, maaari kang makinig sa kaukulang kaganapan.

var myCollapseEl = document.getElementById('myCollapse')

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

Bilang karagdagan, ang isang tawag sa pamamaraan sa isang bahagi ng paglipat ay hindi papansinin .

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

Mga default na setting

Maaari mong baguhin ang mga default na setting para sa isang plugin sa pamamagitan ng pagbabago sa Constructor.Defaultobject ng plugin:

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

Walang salungatan (kung gumagamit ka lang ng jQuery)

Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflictsa plugin na nais mong ibalik ang halaga.

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

Mga numero ng bersyon

Ang bersyon ng bawat plugin ng Bootstrap ay maaaring ma-access sa pamamagitan ng pag- VERSIONaari ng constructor ng plugin. Halimbawa, para sa tooltip plugin:

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

Walang mga espesyal na fallback kapag hindi pinagana ang JavaScript

Ang mga plugin ng Bootstrap ay hindi bumabalik lalo na nang maganda kapag ang JavaScript ay hindi pinagana. Kung nagmamalasakit ka sa karanasan ng user sa kasong ito, gamitin <noscript>upang ipaliwanag ang sitwasyon (at kung paano muling paganahin ang JavaScript) sa iyong mga user, at/o magdagdag ng sarili mong mga custom na fallback.

Sanitizer

Ginagamit ng Tooltips at Popovers ang aming built-in na sanitizer para i-sanitize ang mga opsyon na tumatanggap ng HTML.

Ang default allowListna halaga ay ang sumusunod:

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

Kung gusto mong magdagdag ng mga bagong value sa default na ito allowListmaaari mong gawin ang sumusunod:

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)

Kung gusto mong i-bypass ang aming sanitizer dahil mas gusto mong gumamit ng dedikadong library, halimbawa DOMPuify , dapat mong gawin ang sumusunod:

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