JavaScript

Olona tsirairay na natambatra

Ny plugins dia azo ampidirina tsirairay (mampiasa ny Bootstrap's individual js/dist/*.js), na miaraka amin'ny fampiasana bootstrap.jsna ny minified bootstrap.min.js(aza ampidirina izy roa).

Raha mampiasa bundler ianao (Webpack, Rollup…), azonao atao ny mampiasa /js/dist/*.jsrakitra efa vonona UMD.

Mampiasa Bootstrap ho modely

Manome dikan-tenin'ny Bootstrap naorina ho ESM( bootstrap.esm.jsary bootstrap.esm.min.js) izahay izay ahafahanao mampiasa Bootstrap ho maody ao amin'ny mpitety tranonkalanao, raha manohana azy io ny navigateur kendrenao .

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

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

miankina

Ny plugins sasany sy ny singa CSS dia miankina amin'ny plugins hafa. Raha ampidirinao tsirairay ny plugins, ataovy azo antoka ny manamarina ireo fiankinan-doha ireo ao amin'ny doka.

Miankina amin'ny Popper ihany koa ny fidina, ny popover ary ny toro-làlanay .

Mbola te hampiasa jQuery ve ianao? Azo atao izany!

Ny Bootstrap 5 dia natao hampiasaina tsy misy jQuery, saingy mbola azo atao ny mampiasa ny singantsika amin'ny jQuery. Raha hitan'i Bootstrap jQueryao amin'ilay windowzavatra dia hanampy ny singa rehetra ao amin'ny rafitra plugin an'ny jQuery; midika izany fa azonao atao $('[data-bs-toggle="tooltip"]').tooltip()ny mamela ny toro-làlana. Toy izany koa ny singa hafa eto amintsika.

Data attributes

Saika ny plugins Bootstrap rehetra dia azo alefa sy amboarina amin'ny alàlan'ny HTML irery miaraka amin'ny toetran'ny data (fomba fampiasantsika JavaScript). Ataovy azo antoka fa tsy mampiasa afa-tsy andiana toetra angon-drakitra amin'ny singa tokana ianao (ohatra, tsy afaka manetsika fitaovana sy mody amin'ny bokotra iray ihany ianao.)

zava-mitranga

Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana ataon'ny plugins. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay ny infinitive (ohatra. show) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown) dia mipoitra rehefa vita ny hetsika iray.

Ny hetsika infinitive rehetra dia manome preventDefault()fiasa. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany. Ny fiverenana diso avy amin'ny mpitantana hetsika dia hiantso ho azy ihany koa 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

Ny mpanamboatra rehetra dia manaiky zavatra safidy azo atao na tsia (izay manomboka plugin miaraka amin'ny fitondrantena mahazatra azy):

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

Raha te hahazo ohatra plugin manokana ianao, ny plugin tsirairay dia mampiseho getInstancefomba iray. Raha te haka azy mivantana avy amin'ny singa iray dia ataovy izao: bootstrap.Popover.getInstance(myPopoverEl).

CSS selectors amin'ny constructors

Azonao atao ihany koa ny mampiasa CSS selector ho tohan-kevitra voalohany fa tsy singa DOM hanombohana ny plugin. Amin'izao fotoana izao ny singa ho an'ny plugin dia hita amin'ny querySelectorfomba satria ny plugins dia manohana singa tokana ihany.

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

Fampiasana asynchronous sy transitions

Ny fomba fiasa API programmatic rehetra dia asynchronous ary miverina amin'ny mpiantso raha vao manomboka ny tetezamita fa alohan'ny hifarana .

Mba hanatanterahana hetsika iray rehefa vita ny tetezamita dia azonao atao ny mihaino ny hetsika mifandraika amin'izany.

var myCollapseEl = document.getElementById('myCollapse')

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

Ho fanampin'izany dia tsy horaharahaina ny fiantsoana fomba amin'ny singa tetezamita .

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

Fikirana Default

Azonao atao ny manova ny kinova default ho an'ny plugin iray amin'ny fanovana ny Constructor.Defaulttanjon'ny plugin:

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

Tsy misy fifandirana (raha mampiasa jQuery ianao)

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo dia mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflictny plugin tianao hamerenana ny sandan'ny.

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

Laharana dikan-teny

Ny dikan'ny plugins Bootstrap tsirairay dia azo idirana amin'ny alàlan'ny VERSIONfananan'ny mpamorona ny plugin. Ohatra, ho an'ny plugin tooltip:

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

Tsy misy fiatoana manokana rehefa tsy mandeha ny JavaScript

Ny plugins Bootstrap dia tsy miverina amin'ny fomba tsara indrindra rehefa tsy mandeha ny JavaScript. Raha miraharaha ny traikefan'ny mpampiasa amin'ity tranga ity ianao dia ampiasao <noscript>ny manazava ny toe-javatra (sy ny fomba famelomana indray ny JavaScript) amin'ny mpampiasa anao, ary/na ampio ny fianjeranao manokana.

Sanitizer

Ny Tooltips sy Popovers dia mampiasa ny fanadiovan-tenantsika mba hanadiovana ireo safidy manaiky HTML.

Ny allowListsanda default dia ireto manaraka ireto:

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

Raha te-hanampy soatoavina vaovao amin'ity default ity allowListianao dia afaka manao izao manaraka izao:

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)

Raha te hiala amin'ny sanitizer anay ianao satria aleonao mampiasa tranomboky natokana, ohatra DOMPuify , dia tokony hanao izao manaraka izao ianao:

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