JavaScript

Kinoomu oba ekikuŋŋaanyiziddwa

Plugins zisobola okuteekebwamu kinnoomu (nga okozesa Bootstrap's individual js/dist/*.js), oba zonna omulundi gumu nga okozesa bootstrap.jsoba ezikendeezeddwa bootstrap.min.js(tossaamu byombi).

Bw’oba ​​okozesa bundler (Webpack, Rollup...), osobola okukozesa /js/dist/*.jsfayiro eziri nga zeetegefu UMD.

Okukozesa Bootstrap nga module

Tuwa enkyusa ya Bootstrap ezimbiddwa nga ESM( bootstrap.esm.jsne bootstrap.esm.min.js) ekusobozesa okukozesa Bootstrap nga module mu browser yo, singa browser zo z'ogenderera zigiwagira .

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

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

Ebisinziirwako

Plugins ezimu n'ebitundu bya CSS byesigamye ku plugins endala. Bw'oba ossaamu plugins kinnoomu, kakasa nti okebera bino ebisinziirako mu docs.

Ebintu byaffe ebigwa wansi, popovers n'ebikozesebwa nabyo bisinziira ku Popper .

Okyayagala okukozesa jQuery? Kisoboka!

Bootstrap 5 ekoleddwa okukozesebwa awatali jQuery, naye kikyasoboka okukozesa ebitundu byaffe ne jQuery. Singa Bootstrap ezuula jQuerymu windowkintu ejja kwongerako ebitundu byaffe byonna mu nkola ya jQuery eya plugin; kino kitegeeza nti ojja kusobola okukola $('[data-bs-toggle="tooltip"]').tooltip()okusobozesa obukodyo bw'ebikozesebwa. Bwe kityo bwe kiri ne ku bitundu byaffe ebirala.

Ebintu ebikwata ku data

Kumpi plugins zonna eza Bootstrap zisobola okusobozesa n’okusengekebwa okuyita mu HTML yokka nga zirina data attributes (engeri gye twagala okukozesaamu enkola ya JavaScript). Kakasa nti okozesa ekibinja kimu kyokka eky'ebintu bya data ku elementi emu (okugeza, tosobola kutandika tooltip ne modal okuva ku button y'emu.)

Ebibaddewo

Bootstrap egaba ebibaddewo eby'enjawulo ku bikolwa eby'enjawulo ebya plugins ebisinga obungi. Okutwalira awamu, bino bijja mu ngeri etaliiko nkomerero n’ennyiriri eziyise - nga ekintu ekitaliiko nkomerero (ex. show) kitandikibwawo ku ntandikwa y’ekintu ekibaawo, ate engeri yaakyo ey’ekitundu ekiyise (ex. shown) n’etandika nga ekikolwa kiwedde.

Ebintu byonna ebibaawo ebitaliiko nkomerero biwa preventDefault()enkola. Kino kiwa obusobozi okuyimiriza okukola ekikolwa nga tekinnatandika. Okuzzaayo false okuva ku event handler nakyo kijja kuyita otomatika 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...
})

API ya pulogulaamu

Abazimbi bonna bakkiriza ekintu eky'okulonda eky'okwesalirawo oba tewali kintu kyonna (ekitandika plugin n'enneeyisa yaayo eya bulijjo):

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

Bw’oba ​​oyagala okufuna ekifaananyi kya plugin ekimu, buli plugin eraga getInstanceenkola. Okusobola okugiggya butereevu mu elementi, kola kino: bootstrap.Popover.getInstance(myPopoverEl).

Ebilonda bya CSS mu bizimbisibwa

Osobola n'okukozesa ekisunsula CSS nga ensonga esooka mu kifo ky'ekintu kya DOM okutandikawo plugin. Mu kiseera kino elementi ya plugin esangibwa mu querySelectornkola okuva plugins zaffe bwe ziwagira element emu yokka.

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

Emirimu egitakwatagana n’enkyukakyuka

Enkola zonna eza programmatic API zibeera za asynchronous era zidda eri oyo ayita oluvannyuma lw'enkyukakyuka okutandika naye nga tennaggwa .

Okusobola okukola ekikolwa ng’enkyukakyuka ewedde, osobola okuwuliriza ekintu ekikwatagana.

var myCollapseEl = document.getElementById('myCollapse')

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

Okugatta ku ekyo okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

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

Enteekateeka ezisookerwako

Osobola okukyusa ensengeka ezisookerwako eza plugin nga okyusa Constructor.Defaultekintu kya plugin:

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

Tewali butakkaanya (bw'okozesa jQuery yokka)

Oluusi kyetaagisa okukozesa Bootstrap plugins ne UI frameworks endala. Mu mbeera zino, okutomeragana kw'ekifo ky'amannya kuyinza okubaawo oluusi n'oluusi. Kino bwe kibaawo, oyinza okuyita .noConflictku plugin gy’oyagala okuzzaawo omuwendo gwayo.

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

Ennamba z’enkyusa

Enkyusa ya buli emu ku plugins za Bootstrap esobola okuyingizibwa ng'oyita mu VERSIONkintu ky'omuzimbi wa plugin. Okugeza, ku plugin ya tooltip:

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

Tewali kugwa kwa njawulo nga JavaScript eremeddwa

Bootstrap's plugins tezigwa mabega naddala gracefully nga JavaScript eremeddwa. Bw’oba ​​ofaayo ku bumanyirivu bw’omukozesa mu mbeera eno, kozesa <noscript>okunnyonnyola embeera (n’engeri y’okuddamu okusobozesa JavaScript) eri abakozesa bo, ne/oba okwongerako ebikuddirira byo eby’ennono.

Eddagala erirongoosa

Tooltips ne Popovers zikozesa sanitizer yaffe ezimbiddwa mu sanitize options ezikkiriza HTML.

Omuwendo ogusookerwako allowListgwe guno wammanga:

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

Bw'oba oyagala okwongera emiwendo emipya ku kino ekisookerwako allowListosobola okukola bino wammanga:

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)

Bw’oba ​​oyagala okuyita ku sanitizer yaffe kubanga oyagala nnyo okukozesa etterekero ly’ebitabo eriweereddwayo, okugeza DOMPurify , olina okukola bino wammanga:

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