JavaScript

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 lub pob (Webpack, Rollup…), koj tuaj yeem siv /js/dist/*.jscov ntaub ntawv uas yog UMD npaj.

Siv Bootstrap ua ib qho module

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 koj tus 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>

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 .

Tseem xav siv jQuery? Nws ua tau!

Bootstrap 5 yog tsim los siv tsis muaj jQuery, 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 txhais tau tias koj yuav muaj peev xwm ua tau $('[data-bs-toggle="tooltip"]').tooltip()kom pab tau cov lus qhia. Ib yam mus rau peb lwm yam.

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.)

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().

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

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):

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

Yog tias koj xav tau ib qho plugin tshwj xeeb, txhua lub plugin nthuav tawm ib getInstancetxoj hauv kev. Yuav kom rov qab tau nws ncaj qha los ntawm ib lub caij, ua qhov no: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors hauv constructors

Koj tuaj yeem siv CSS selector ua thawj qhov kev sib cav tsis yog DOM lub caij los pib lub plugin. Tam sim no lub caij rau lub plugin pom los ntawm querySelectortxoj kev txij li peb cov plugins txhawb nqa ib lub caij nkaus xwb.

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

Asynchronous muaj nuj nqi thiab kev hloov pauv

Txhua txoj kev API programmatic yog asynchronous thiab rov qab mus rau tus neeg hu thaum qhov kev hloov pauv pib 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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (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 ignored .

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

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

Tsis muaj teeb meem (tsuas yog koj siv jQuery)

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.

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

Cov lej

Cov version ntawm txhua qhov ntawm Bootstrap's plugins tuaj yeem nkag tau los ntawm cov VERSIONcuab yeej ntawm plugin tus tsim. Piv txwv li, rau tooltip plugin:

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

Tsis muaj qhov cuam tshuam tshwj xeeb thaum JavaScript raug kaw

Bootstrap's plugins tsis poob rov qab tshwj xeeb zoo nkauj 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.

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:

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

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

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)

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:

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