JavaScript

Nqa Bootstrap rau lub neej nrog peb xaiv JavaScript plugins. Kawm paub txog txhua lub plugin, peb cov ntaub ntawv thiab cov kev xaiv API programmatic, thiab lwm yam.

Ntawm nplooj ntawv no

Tus kheej los yog muab tso ua ke

Plugins tuaj yeem suav nrog tus kheej (siv Bootstrap tus neeg js/dist/*.js), lossis tag nrho ib zaug siv bootstrap.jslossis cov minified bootstrap.min.js(tsis suav ob qho tib si).

Yog tias koj siv cov pob khoom (Webpack, Parcel, Vite…), koj tuaj yeem siv /js/dist/*.jscov ntaub ntawv uas yog UMD npaj.

Siv nrog JavaScript moj khaum

Thaum lub Bootstrap CSS tuaj yeem siv nrog txhua lub moj khaum, Bootstrap JavaScript tsis tau ua tiav nrog JavaScript lub luag haujlwm xws li React, Vue, thiab Angular uas xav tias muaj kev paub tag nrho ntawm DOM. Ob leeg Bootstrap thiab lub moj khaum yuav sim hloov pauv tib lub ntsiab lus DOM, ua rau muaj kab laum zoo li kev poob qis uas tau daig hauv txoj haujlwm "qhib".

Ib qho kev xaiv zoo dua rau cov uas siv hom qauv no yog siv lub hauv paus tshwj xeeb pob es tsis txhob ntawm Bootstrap JavaScript. Nov yog qee qhov kev xaiv nrov tshaj plaws:

React: React Bootstrap
Vue: BootstrapVue (tam sim no tsuas yog txhawb Vue 2 thiab Bootstrap 4)
Angular: ng-bootstrap

Siv Bootstrap ua ib qho module

Sim koj tus kheej! Download the source code and work demo for using Bootstrap as an ES module from the twbs/example repository . Koj tuaj yeem qhib qhov piv txwv hauv StackBlitz .

Peb muab ib tug version ntawm Bootstrap ua raws li ESM( bootstrap.esm.jsthiab bootstrap.esm.min.js) uas tso cai rau koj siv Bootstrap raws li ib tug module nyob rau hauv lub browser, yog hais tias koj lub hom phiaj browsers txhawb nws .

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

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

Piv rau JS bundlers, siv ESM hauv qhov browser xav kom koj siv tag nrho txoj hauv kev thiab filename es tsis txhob siv lub npe module. Nyeem ntxiv txog JS modules hauv browser. Tias yog vim li cas peb siv 'bootstrap.esm.min.js'es tsis txhob 'bootstrap'saum toj no. Txawm li cas los xij, qhov no yog qhov nyuaj ntxiv los ntawm peb qhov kev vam khom Popper, uas imports Popper rau hauv peb JavaScript zoo li:

import * as Popper from "@popperjs/core"

Yog tias koj sim qhov no li-yog, koj yuav pom qhov yuam kev hauv console zoo li hauv qab no:

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

Txhawm rau txhim kho qhov no, koj tuaj yeem siv ib qho importmaplos daws cov npe ntawm cov npe uas tsis txaus ntseeg kom ua tiav txoj hauv kev. Yog tias koj lub hom phiaj browsers tsis txhawb importmap, koj yuav tsum tau siv qhov project es-module-shims . Nov yog qhov nws ua haujlwm rau Bootstrap thiab 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>

Kev vam meej

Qee cov plugins thiab CSS cov khoom nyob ntawm lwm cov plugins. Yog tias koj suav nrog plugins ib tus zuj zus, nco ntsoov xyuas cov kev vam meej hauv cov ntaub ntawv.

Peb cov dropdowns, popovers, thiab tooltips kuj nyob ntawm Popper .

Cov ntaub ntawv yam ntxwv

Yuav luag txhua Bootstrap plugins tuaj yeem qhib thiab teeb tsa los ntawm HTML ib leeg nrog cov ntaub ntawv cwj pwm (peb txoj kev nyiam siv JavaScript ua haujlwm). Nco ntsoov tsuas yog siv ib txheej ntawm cov ntaub ntawv tus cwj pwm ntawm ib lub caij (xws li, koj tsis tuaj yeem ua rau cov lus qhia thiab cov qauv ntawm tib lub pob.)

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, tus titlenqi kawg yuav yog 456thiab cov ntaub ntawv sib cais yuav dhau los ntawm cov txiaj ntsig tau muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Cov xaiv

Peb siv cov haiv neeg querySelectorthiab querySelectorAllcov txheej txheem los nug DOM cov ntsiab lus rau kev ua tau zoo, yog li koj yuav tsum siv cov xaiv siv tau . Yog tias koj siv cov xaiv tshwj xeeb xws li collapse:Example, nco ntsoov khiav lawv.

Cov xwm txheej

Bootstrap muab cov xwm txheej kev cai rau feem ntau plugins 'kev ua tshwj xeeb. Feem ntau, cov no tuaj nyob rau hauv ib daim ntawv infinitive thiab yav dhau los koom nrog - qhov twg qhov infinitive (ex. show) yog tshwm sim thaum pib ntawm ib qho kev tshwm sim, thiab nws yav dhau los kev koom tes (ex. shown) yog tshwm sim ntawm qhov ua tiav ntawm qhov kev txiav txim.

Tag nrho cov txheej xwm infinitive muab preventDefault()functionality. Qhov no muab lub peev xwm los nres qhov kev txiav txim ua ntej nws pib. Rov qab tsis muaj tseeb los ntawm tus neeg saib xyuas kev tshwm sim kuj tseem yuav hu xov tooj preventDefault().

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

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

Programmatic API

Txhua tus neeg tsim khoom lees txais qhov kev xaiv xaiv yam khoom lossis tsis muaj dab tsi (uas pib lub plugin nrog nws tus cwj pwm tsis zoo):

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

Yog tias koj xav tau ib qho plugin tshwj xeeb, txhua lub plugin nthuav tawm ib getInstancetxoj hauv kev. Piv txwv li, kom muab ib qho piv txwv ncaj qha los ntawm ib qho khoom:

bootstrap.Popover.getInstance(myPopoverEl)

Txoj kev no yuav rov qab nullyog tias qhov piv txwv tsis tau pib hla lub ntsiab lus thov.

Xwb, getOrCreateInstancetuaj yeem siv tau kom tau txais qhov piv txwv txuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Yog tias qhov piv txwv tsis tau pib, nws tuaj yeem lees txais thiab siv qhov kev xaiv qhov khoom siv raws li kev sib cav thib ob.

CSS selectors hauv constructors

Ntxiv rau cov txheej txheem getInstancethiab getOrCreateInstancecov txheej txheem, txhua tus tsim plugin tuaj yeem lees txais DOM lub caij lossis tus xaiv CSS siv tau raws li thawj qhov kev sib cav. Plugin ntsiab tau pom nrog txoj hauv querySelectorkev txij li peb cov plugins tsuas yog txhawb nqa ib lub caij.

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 muaj nuj nqi thiab kev hloov pauv

Txhua txoj kev API programmatic yog asynchronous thiab rov qab mus rau tus neeg hu thaum pib hloov pauv, tab sis ua ntej nws xaus . Txhawm rau ua qhov kev txiav txim thaum qhov kev hloov pauv tiav, koj tuaj yeem mloog cov xwm txheej sib thooj.

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

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

Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

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`txoj kev

Txawm hais tias nws yuav zoo li yog siv txoj disposekev tam sim ntawd tom qab hide(), nws yuav ua rau cov txiaj ntsig tsis raug. Nov yog ib qho piv txwv ntawm qhov teeb meem siv:

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

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

Default settings

Koj tuaj yeem hloov qhov chaw pib rau lub plugin los ntawm kev hloov kho lub plugin cov Constructor.Defaultkhoom:

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

Cov txheej txheem thiab cov khoom

Txhua Bootstrap plugin nthuav tawm cov txheej txheem hauv qab no thiab cov khoom zoo li qub.

Txoj kev	Kev piav qhia
`dispose`	Ua kom puas lub ntsiab ntawm modal. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
`getInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov qauv piv txwv cuam tshuam nrog DOM lub caij.
`getOrCreateInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov qauv piv txwv cuam tshuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib.

Static khoom	Kev piav qhia
`NAME`	Rov qab lub npe plugin. (Piv txwv: `bootstrap.Tooltip.NAME`)
`VERSION`	Cov version ntawm txhua qhov ntawm Bootstrap's plugins tuaj yeem nkag tau los ntawm cov `VERSION`cuab yeej ntawm plugin tus tsim (Piv txwv: `bootstrap.Tooltip.VERSION`)

Tshuaj ntxuav tes

Cov lus qhia thiab Popovers siv peb cov tshuaj ntxuav tes ua ke los ntxuav cov kev xaiv uas lees txais HTML.

Tus allowListnqi pib yog cov hauv qab no:

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

Yog tias koj xav ntxiv qhov tseem ceeb tshiab rau lub neej ntawd allowListkoj tuaj yeem ua cov hauv qab no:

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)

Yog tias koj xav hla peb cov tshuaj tua kab mob vim tias koj nyiam siv lub tsev qiv ntawv tshwj xeeb, piv txwv li DOMPurify , koj yuav tsum ua cov hauv qab no:

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

Optionally siv jQuery

Koj tsis tas yuav jQuery hauv Bootstrap 5 , tab sis nws tseem tuaj yeem siv peb cov khoom nrog jQuery. Yog tias Bootstrap pom jQueryhauv cov windowkhoom, nws yuav ntxiv tag nrho peb cov khoom hauv jQuery's plugin system. Qhov no tso cai rau koj ua cov hauv qab no:

$('[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

Ib yam mus rau peb lwm yam.

Tsis muaj teeb meem

Qee lub sij hawm nws yog qhov tsim nyog los siv Bootstrap plugins nrog rau lwm qhov UI lub luag haujlwm. Hauv cov xwm txheej no, kev sib tsoo ntawm lub npe chaw tuaj yeem tshwm sim qee zaus. Yog tias qhov no tshwm sim, koj tuaj yeem hu .noConflictrau lub plugin koj xav rov qab tus nqi ntawm.

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

Bootstrap tsis ua haujlwm txhawb nqa JavaScript cov tsev qiv ntawv thib peb xws li Prototype lossis jQuery UI. Txawm hais tias .noConflictthiab cov xwm txheej muaj npe, tej zaum yuav muaj teeb meem kev sib raug zoo uas koj yuav tsum tau kho ntawm koj tus kheej.

jQuery cov xwm txheej

Bootstrap yuav ntes jQuery yog tias jQuerymuaj nyob rau hauv cov windowkhoom thiab tsis muaj data-bs-no-jquerytus cwj pwm teem rau <body>. Yog tias pom jQuery, Bootstrap yuav tawm cov xwm txheej ua tsaug rau jQuery qhov kev tshwm sim. Yog li yog tias koj xav mloog Bootstrap cov xwm txheej, koj yuav tsum siv cov txheej txheem jQuery ( .on, .one) es tsis yog addEventListener.

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

Disabled JavaScript

Bootstrap's plugins tsis muaj qhov cuam tshuam tshwj xeeb thaum JavaScript raug kaw. Yog tias koj mob siab txog cov neeg siv kev paub dhau los hauv qhov no, siv <noscript>los piav qhia qhov xwm txheej (thiab yuav ua li cas rov qhib JavaScript) rau koj cov neeg siv, thiab / lossis ntxiv koj tus kheej cov kev cai poob qis.