JavaScript

Na Bootstrap nagbɔ agbe kple míaƒe JavaScript ƒe kpeɖeŋutɔ siwo míetia siwo wotu ɖe jQuery dzi. Srɔ̃ nu tso plugin ɖesiaɖe ŋu, míaƒe nyatakakawo kple ɖoɖowɔɖi ƒe API ƒe tiatiawɔblɔɖewo, kple bubuwo ŋu.

Ame ɖekaɖekawo alo woƒo ƒu

Woateŋu ade plugins ɖekaɖeka (zã Bootstrap ƒe ɖekaɖeka js/dist/*.js), alo wo katã zi ɖeka to zazã bootstrap.jsalo esiwo woɖe ɖe vovo bootstrap.min.js(mègade evea siaa eme o).

Ne èzã bundler (Webpack, Rollup...), àteŋu azã /js/dist/*.jsfaɛl siwo le klalo na UMD.

Nusiwo dzi woanɔ te ɖo

Plugin aɖewo kple CSS ƒe akpa aɖewo nɔa te ɖe plugin bubuwo dzi. Ne ède plugins ɖekaɖeka la, kpɔ egbɔ be yelé ŋku ɖe nusiwo dzi woanɔ te ɖo siawo ŋu le docs me. De dzesii hã be plugins katã nɔ te ɖe jQuery dzi (esia fia be ele be woatsɔ jQuery ade eme do ŋgɔ na plugin ƒe faɛlwo). Kpɔ mía ŋkumepackage.json be nàkpɔ jQuery ƒe tɔtrɔ siwo wodo alɔe.

Míaƒe dropdowns, popovers kple dɔwɔnu ƒe aɖaŋuɖoɖowo hã nɔ te ɖe Popper.js dzi .

Nyatakaka ƒe nɔnɔmewo

Woateŋu awɔ Bootstrap ƒe kpeɖeŋutɔwo katã kloe ŋudɔ eye woaɖo wo ɖe ɖoɖo nu to HTML ɖeɖeko dzi kple nyatakaka ƒe nɔnɔmewo (mɔ si míelɔ̃na wu be míazã JavaScript ƒe dɔwɔwɔ). Kpɔ egbɔ be yezã nyatakaka ƒe nɔnɔmewo ƒe hatsotso ɖeka ko ɖe nu ɖeka dzi (le kpɔɖeŋu me, màte ŋu aʋu dɔwɔnu ƒe aɖaŋuɖoɖo kple modal tso abɔta ɖeka dzi o.)

Gake le nɔnɔme aɖewo me la, ate ŋu anyo be woawɔ dɔ sia nuwɔametɔe. Be nàwɔ data attribute API la nuwɔametɔ la, ɖe nudzɔdzɔ siwo katã le nuŋlɔɖi si ƒe ŋkɔwo le dometsotso me kple data-apiabe ale ene la ɖa:

$(document).off('.data-api')

Alo, be nàɖo taɖodzinu na plugin aɖe koŋ la, ɖeko nàde plugin la ƒe ŋkɔ abe ŋkɔteƒe ene kpe ɖe data-api ŋkɔteƒe ŋu abe esia ene:

$(document).off('.alert.data-api')

Nudzɔdzɔwo

Bootstrap naa nudzɔdzɔ tɔxɛwo na plugins akpa gãtɔ ƒe nuwɔna tɔxɛwo. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple akpaɖekedzimademade ƒe nɔnɔme si va yi me - afisi wodzea nyagbemanɔsitɔ (ex. show) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpaɖekedzimademade ƒe nɔnɔme si va yi (ex. shown) dzea egɔme le nuwɔna aɖe ƒe nuwuwu.

Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefault()dɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme. Ne ètrɔ alakpa tso nudzɔdzɔwo gbɔ kpɔla me la, ayɔ hã le eɖokui si preventDefault().

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Ðoɖowɔɖi ƒe API

Míexɔe se hã be ele be nàte ŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to JavaScript API dzi ko. Dutoƒo APIwo katã nye mɔnu ɖeka, siwo ŋu kɔsɔkɔsɔ le, eye wogbugbɔa nuƒoƒoƒu si dzi wowɔ dɔ ɖo la trɔna.

$('.btn.danger').button('toggle').addClass('fat')

Ele be mɔnuwo katã naxɔ tiatiawɔblɔɖe ƒe nu, ka si woɖo taɖodzinu na mɔnu aɖe koŋ, alo naneke o (si dzea kpeɖeŋutɔ gɔme kple nuwɔna si woɖo ɖi):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Plugin ɖesiaɖe hã ɖea eƒe raw constructor ɖe go le Constructornunɔamesi aɖe dzi: $.fn.popover.Constructor. Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, xɔe tẽ tso element aɖe me: $('[rel="popover"]').data('popover').

Dɔwɔwɔ siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

Programmatic API mɔnuwo katã nye asynchronous eye wotrɔna yia yɔla gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu .

Be nàte ŋu awɔ nuwɔna aɖe ne tɔtrɔa wu enu ko la, àte ŋu ase nudzɔdzɔ si sɔ kplii.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Tsɔ kpe ɖe eŋu la , woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Ðoɖo siwo woɖo ɖi xoxo

Àteŋu atrɔ ɖoɖo siwo woɖo ɖi na plugin to asitɔtrɔ le plugin ƒe Constructor.Defaultnu ŋu:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Masɔmasɔ aɖeke meli o

Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflictplugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.

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

Version ƒe xexlẽdzesiwo

Woateŋu akpɔ Bootstrap ƒe jQuery ƒe kpeɖeŋutɔ ɖesiaɖe ƒe tɔtrɔ to VERSIONkpeɖeŋutɔ ƒe xɔtula ƒe nɔnɔme dzi. Le kpɔɖeŋu me, na dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ la:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

Fallback tɔxɛ aɖeke meli ne wotu JavaScript o

Bootstrap ƒe plugins medzea anyi ɖe megbe etɔxɛe amenuveve ne JavaScript nye nuwɔametɔ o. Ne ètsɔ ɖe le zãla ƒe nuteƒekpɔkpɔ me le go sia me la, zã <noscript>nàtsɔ aɖe nɔnɔmea me (kple alesi nàgbugbɔ JavaScript awɔ dɔe) me na wò zãlawo, kple/alo nàtsɔ wò ŋutɔ wò fallback siwo nèwɔ la akpe ɖe eŋu.

Util

Bootstrap ƒe JavaScript faɛlwo katã nɔ te ɖe edzi util.jseye ele be woatsɔe akpe ɖe JavaScript faɛl bubuawo ŋu. Ne èle compiled (alo minified) zãm la bootstrap.js, mehiã be nàde esia eme o—ele afima xoxo.

util.jssi me dɔwɔnu ƒe dɔwɔwɔwo kple kpeɖeŋutɔ vevi aɖe na transitionEndnudzɔdzɔwo kpakple CSS ƒe tɔtrɔ ƒe kpɔɖeŋu le eme. Wozãnɛ to plugin bubuawo dzi tsɔ léa ŋku ɖe CSS ƒe tɔtrɔ ƒe kpekpeɖeŋu ŋu eye wòléa tɔtrɔ siwo le xɔxlɔ̃m.

Atike si wotsɔna klɔa nu ŋu

Dɔwɔnu ƒe aɖaŋuɖoɖowo kple Popovers zãa míaƒe dzadzɛnyenye si wotu ɖe eme tsɔ kɔa tiatia siwo xɔa HTML la ŋu.

Asixɔxɔ si woɖo ɖi whiteListlae nye esiawo:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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: []
}

Ne èdi be yeatsɔ asixɔxɔ yeyewo akpe ɖe default sia ŋu la whiteList, àteŋu awɔ nusiwo gbɔna:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Ne èdi be yeato míaƒe dzadzɛnyenyemɔ̃a ŋu le esi nèdi be yeazã agbalẽdzraɖoƒe si woɖo ɖi koŋ ta, le kpɔɖeŋu me DOMPurify , ele be nàwɔ nu siwo gbɔna:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})