JavaScript

Umuntu ku giti cye cyangwa yakusanyijwe

Amacomeka arashobora gushyirwamo kugiti cye (ukoresheje Bootstrap kugiti cye js/dist/*.js), cyangwa byose icyarimwe ukoresheje bootstrap.jscyangwa bigabanijwe bootstrap.min.js(ntushyiremo byombi).

Niba ukoresheje bundler (Webpack, Rollup…), urashobora gukoresha /js/dist/*.jsdosiye UMD yiteguye.

Gukoresha Bootstrap nka module

Dutanga verisiyo ya Bootstrap yubatswe nka ESM( bootstrap.esm.jsna bootstrap.esm.min.js) igufasha gukoresha Bootstrap nka module muri mushakisha yawe, niba mushakisha yawe igushigikiye .

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

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

Kwishingikiriza

Amacomeka hamwe nibice bya CSS biterwa nandi macomeka. Niba ushizemo amacomeka kugiti cye, menya neza niba ugenzura ibyo biterwa muri doc.

Ibitonyanga byacu, popovers hamwe nibikoresho byifashishwa na Popper .

Urashaka gukoresha jQuery? Birashoboka!

Bootstrap 5 yagenewe gukoreshwa idafite jQuery, ariko biracyashoboka gukoresha ibice byacu hamwe na jQuery. Niba Bootstrap ibonye jQuerymubintuwindow izongeramo ibice byose muri sisitemu ya plugin ya jQuery ; ibi bivuze ko uzashobora gukora $('[data-bs-toggle="tooltip"]').tooltip()kugirango ushoboze ibikoresho. Kimwe nacyo kijyanye nibindi bice byacu.

Ibiranga amakuru

Amacomeka hafi ya yose ya Bootstrap arashobora gushobozwa no kugenwa binyuze muri HTML yonyine hamwe nibiranga amakuru (uburyo twahisemo bwo gukoresha imikorere ya JavaScript). Wemeze gukoresha gusa urutonde rwibintu biranga ikintu kimwe (urugero, ntushobora gukurura igikoresho na modal kuva kuri buto imwe.)

Ibyabaye

Bootstrap itanga ibyabaye kubintu byinshi byacometse kubikorwa byihariye. Mubisanzwe, ibi biza muburyo butagira ingano kandi bwashize - aho infinitive (ex. show) Itangizwa mugitangira ibirori, kandi ifishi yacyo ya kera (ex. shown) Iterwa no kurangiza igikorwa.

Ibintu byose bitagira ingano bitanga preventDefault()imikorere. Ibi bitanga ubushobozi bwo guhagarika ikorwa ryigikorwa mbere yuko gitangira. Garuka ibinyoma bivuye mubyabaye nabyo bizahita bihamagara 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...
})

Gahunda ya API

Abubaka bose bemera ibintu bidahitamo ikintu cyangwa ntakindi (gitangiza plugin nimyitwarire isanzwe):

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

Niba ushaka kubona plugin runaka urugero, buri plugin yerekana getInstanceuburyo. Kugirango uyisubize mu buryo butaziguye ikintu, kora ibi : bootstrap.Popover.getInstance(myPopoverEl).

Abatoranya CSS mububaka

Urashobora kandi gukoresha CSS uwatoranije nkimpaka yambere aho kuba DOM element kugirango utangire plugin. Kugeza ubu ikintu cya plugin kiboneka muburyo querySelectorkuva amacomeka yacu ashyigikira ikintu kimwe gusa.

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

Imikorere ninzibacyuho

Uburyo bwose bwa programme API nuburyo budahwitse kandi bugaruka kumuhamagara iyo inzibacyuho itangiye ariko mbere yuko irangira .

Kugirango ukore igikorwa iyo inzibacyuho irangiye, urashobora kumva ibyabaye.

var myCollapseEl = document.getElementById('myCollapse')

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

Mubyongeyeho uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

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

Igenamiterere risanzwe

Urashobora guhindura igenamiterere risanzwe rya plugin uhindura Constructor.Defaultikintu cya plugin:

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

Nta makimbirane (gusa niba ukoresha jQuery)

Rimwe na rimwe, birakenewe gukoresha amacomeka ya Bootstrap hamwe nibindi UI. Muri ibi bihe, umwanya wizina urashobora guhura rimwe na rimwe. Niba ibi bibaye, urashobora guhamagara .noConflictkuri plugin wifuza guhindura agaciro ka.

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

Inomero za verisiyo

Verisiyo ya buri plugin ya Bootstrap irashobora kugerwaho hifashishijwe VERSIONumutungo wububiko. Kurugero, kubikoresho bya plugin:

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

Nta gusubira inyuma bidasanzwe iyo JavaScript ihagaritswe

Amacomeka ya Bootstrap ntasubira inyuma cyane cyane mugihe JavaScript ihagaritswe. Niba witaye kuburambe bwabakoresha muriki kibazo, koresha <noscript>kugirango usobanure uko ibintu bimeze (nuburyo bwo kongera gukora JavaScript) kubakoresha, kandi / cyangwa wongereho ibyo wiboneye.

Isuku

Ibikoresho na popovers bikoresha ibikoresho byubatswe byubatswe kugirango dusukure amahitamo yemera HTML.

Agaciro allowListgasanzwe ni ibi bikurikira:

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

Niba ushaka kongeramo indangagaciro kuriyi isanzwe allowListurashobora gukora ibi bikurikira:

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)

Niba ushaka kurenga isuku yacu kuko uhisemo gukoresha isomero ryabigenewe, urugero DOMPurify , ugomba gukora ibi bikurikira:

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