JavaScript

Ihatag ang Bootstrap sa kinabuhi sa among opsyonal nga JavaScript plugins. Pagkat-on mahitungod sa matag plugin, among data ug programmatic API nga mga opsyon, ug uban pa.

Niini nga panid

Indibidwal o gihugpong

Ang mga plugins mahimong iapil sa tagsa-tagsa (gamit ang Bootstrap's individual js/dist/*.js), o tanan sa usa ka higayon gamit bootstrap.jso ang minified bootstrap.min.js(ayaw iapil ang duha).

Kung mogamit ka usa ka bundler (Webpack, Parcel, Vite…), mahimo nimong gamiton ang /js/dist/*.jsmga file nga andam sa UMD.

Paggamit sa JavaScript frameworks

Samtang ang Bootstrap CSS mahimong magamit sa bisan unsang balangkas, ang Bootstrap JavaScript dili hingpit nga nahiuyon sa mga balangkas sa JavaScript sama sa React, Vue, ug Angular nga adunay hingpit nga kahibalo sa DOM. Ang Bootstrap ug ang framework mahimong mosulay sa pag-mutate sa parehas nga elemento sa DOM, nga moresulta sa mga bug sama sa mga dropdown nga natanggong sa "bukas" nga posisyon.

Ang usa ka mas maayo nga alternatibo alang niadtong naggamit niini nga matang sa mga frameworks mao ang paggamit sa usa ka framework-specific nga pakete imbes sa Bootstrap JavaScript. Ania ang pipila sa labing popular nga mga kapilian:

React: React Bootstrap
Vue: BootstrapVue (karon nagsuporta lamang sa Vue 2 ug Bootstrap 4)
Angular: ng-bootstrap

Paggamit sa Bootstrap isip usa ka module

Sulayi kini sa imong kaugalingon! I-download ang source code ug working demo para sa paggamit sa Bootstrap isip ES module gikan sa twbs/examples repository . Mahimo usab nimo ablihan ang pananglitan sa StackBlitz .

Naghatag kami og bersyon sa Bootstrap nga gitukod isip ESM( bootstrap.esm.jsug bootstrap.esm.min.js) nga nagtugot kanimo sa paggamit sa Bootstrap isip module sa browser, kung ang imong gipunting nga mga browser nagsuporta niini .

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

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

Kung itandi sa JS bundlers, ang paggamit sa ESM sa browser nanginahanglan nimo nga gamiton ang tibuuk nga agianan ug filename imbes sa ngalan sa module. Basaha ang dugang bahin sa JS modules sa browser. Mao nga among gigamit 'bootstrap.esm.min.js'imbes sa 'bootstrap'ibabaw. Bisan pa, kini labi ka komplikado sa among pagsalig sa Popper, nga nag-import sa Popper sa among JavaScript sama niini:

import * as Popper from "@popperjs/core"

Kung sulayan nimo kini kung unsa, makakita ka usa ka sayup sa console sama sa mosunod:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Aron ayuhon kini, mahimo nimong gamiton ang usa importmaparon masulbad ang arbitraryong mga ngalan sa module aron makompleto ang mga agianan. Kung ang imong gipunting nga mga browser dili mosuporta sa importmap, kinahanglan nimo nga gamiton ang es-module-shims nga proyekto. Ania kung giunsa kini molihok alang sa Bootstrap ug Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Mga pagsalig

Ang ubang mga plugins ug CSS component nagdepende sa ubang mga plugins. Kung gilakip nimo ang mga plugins nga tagsa-tagsa, siguruha nga susihon kini nga mga dependency sa mga doc.

Ang among mga dropdown, popover, ug tooltips nagdepende usab sa Popper .

Mga hiyas sa datos

Hapit tanan nga mga plugin sa Bootstrap mahimong ma-enable ug ma-configure pinaagi sa HTML nga nag-inusara nga adunay mga hiyas sa datos (atong gusto nga paagi sa paggamit sa JavaScript). Siguroha nga mogamit lang og usa ka set sa data attributes sa usa ka elemento (pananglitan, dili ka maka-trigger og tooltip ug modal gikan sa samang buton.)

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Mga tigpili

Gigamit namo ang lumad querySelectorug querySelectorAllmga pamaagi sa pagpangutana sa mga elemento sa DOM alang sa mga rason sa performance, mao nga kinahanglan kang mogamit ug balido nga mga tigpili . Kung mogamit ka ug espesyal nga mga tigpili sama sa collapse:Example, siguruha nga makalikay kanila.

Mga panghitabo

Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan sa mga talagsaon nga aksyon sa mga plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang infinitive (ex. show) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown) ma-trigger sa pagkahuman sa usa ka aksyon.

Ang tanan nga infinitive nga mga panghitabo naghatag preventDefault()gamit. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod. Ang pagbalik sa bakak gikan sa tigdumala sa panghitabo awtomatiko usab nga motawag preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Programmatic API

Ang tanan nga mga konstruktor modawat sa usa ka opsyonal nga kapilian nga butang o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga kinaiya niini):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, ang matag plugin nagpadayag usa ka getInstancepamaagi. Pananglitan, aron makuha ang usa ka instance direkta gikan sa usa ka elemento:

bootstrap.Popover.getInstance(myPopoverEl)

Kini nga pamaagi mobalik nullkung ang usa ka pananglitan wala gisugdan sa gihangyo nga elemento.

Sa laing bahin, getOrCreateInstancemahimong gamiton aron makuha ang instance nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Kung ang usa ka instance wala gisugdan, kini mahimong modawat ug mogamit sa usa ka opsyonal nga butang sa pagsumpo isip ikaduhang argumento.

Mga tigpili sa CSS sa mga konstruktor

Dugang pa sa getInstanceug getOrCreateInstancemga pamaagi, ang tanan nga plugin constructors makadawat sa usa ka DOM nga elemento o usa ka balido nga CSS selector isip unang argumento. Ang mga elemento sa plugin makit-an sa querySelectorpamaagi tungod kay ang among mga plugins nagsuporta lamang sa usa ka elemento.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Asynchronous nga mga gimbuhaton ug mga transisyon

Ang tanang programmatic API nga pamaagi kay asynchronous ug mobalik sa caller sa higayon nga masugdan na ang transisyon, pero sa dili pa kini matapos . Aron mapatuman ang usa ka aksyon kung makompleto na ang transisyon, mahimo nimong paminawon ang katugbang nga panghitabo.

const myCollapseEl = document.querySelector('#myCollapse')

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

Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`pamaagi

Bisan kung ingon og husto nga gamiton ang disposepamaagi pagkahuman dayon hide(), kini modala sa dili husto nga mga sangputanan. Ania ang usa ka pananglitan sa paggamit sa problema:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Default nga mga setting

Mahimo nimong usbon ang default setting para sa usa ka plugin pinaagi sa pag-usab sa Constructor.Defaultbutang sa plugin:

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

Mga pamaagi ug kabtangan

Ang matag Bootstrap plugin nagbutyag sa mosunod nga mga pamaagi ug static nga mga kabtangan.

Pamaagi	Deskripsyon
`dispose`	Makaguba sa modal sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
`getInstance`	Static nga pamaagi nga nagtugot kanimo sa pagkuha sa modal nga pananglitan nga may kalabutan sa usa ka elemento sa DOM.
`getOrCreateInstance`	Static nga pamaagi nga nagtugot kanimo sa pagkuha sa modal nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

Static nga kabtangan	Deskripsyon
`NAME`	Ibalik ang ngalan sa plugin. (Pananglitan: `bootstrap.Tooltip.NAME`)
`VERSION`	Ang bersyon sa matag usa sa Bootstrap's plugins mahimong ma-access pinaagi sa `VERSION`property sa plugin's constructor (Pananglitan: `bootstrap.Tooltip.VERSION`)

Sanitizer

Ang Tooltips ug Popovers naggamit sa among built-in nga sanitizer aron sanitize ang mga opsyon nga modawat sa HTML.

Ang default allowListnga bili mao ang mosunod:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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 nimong idugang ang bag-ong mga kantidad sa kini nga default allowListmahimo nimo ang mosunod:

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Kung gusto nimo nga laktawan ang among sanitizer tungod kay gusto nimo nga mogamit usa ka gipahinungod nga librarya, pananglitan DOMPuify , kinahanglan nimo buhaton ang mga musunud:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Opsyonal gamit ang jQuery

Dili nimo kinahanglan ang jQuery sa Bootstrap 5 , apan posible gihapon nga gamiton ang among mga sangkap sa jQuery. Kung makit-an sa Bootstrap jQueryang windowbutang, idugang niini ang tanan namon nga sangkap sa sistema sa plugin sa jQuery. Kini nagtugot kanimo sa pagbuhat sa mosunod:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Ingon usab niana ang among ubang mga sangkap.

Walay panagbangi

Usahay gikinahanglan ang paggamit sa Bootstrap plugins sa ubang mga UI frameworks. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflictang plugin nga gusto nimo ibalik ang kantidad.

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

Ang Bootstrap dili opisyal nga nagsuporta sa mga librarya sa JavaScript sa ikatulo nga partido sama sa Prototype o jQuery UI. Bisan pa .noConflictug namespaced nga mga panghitabo, mahimong adunay mga problema sa pagpahiangay nga kinahanglan nimo nga ayohon sa imong kaugalingon.

jQuery nga mga panghitabo

Makita sa Bootstrap ang jQuery kung jQuerynaa sa windowbutang ug wala’y data-bs-no-jquerygibutang nga attribute sa <body>. Kung makit-an ang jQuery, ang Bootstrap magpagawas sa mga panghitabo salamat sa sistema sa panghitabo sa jQuery. Busa kung gusto nimo maminaw sa mga panghitabo sa Bootstrap, kinahanglan nimong gamiton ang mga pamaagi sa jQuery ( .on, .one) imbes nga addEventListener.

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

Gibalda ang JavaScript

Ang mga plugins sa Bootstrap walay espesyal nga fallback kung ang JavaScript gi-disable. Kung nagpakabana ka bahin sa kasinatian sa gumagamit sa kini nga kaso, gamita <noscript>aron ipasabut ang sitwasyon (ug kung giunsa pag-usab ang JavaScript) sa imong mga tiggamit, ug / o pagdugang sa imong kaugalingon nga naandan nga mga fallback.