JavaScript

Etsa hore Bootstrap e phele ka li-plugins tsa rona tsa boikhethelo tsa JavaScript tse hahiloeng ho jQuery. Ithute ka plugin ka 'ngoe, likhetho tsa rona tsa data le mananeo a API, le tse ling.

Motho ka mong kapa a kopantswe

Li-plugins li ka kenyeletsoa ka bonngoe (ho sebelisa Bootstrap ka bomong js/dist/*.js), kapa kaofela ka nako e le 'ngoe li sebelisa bootstrap.jskapa tse entsoeng bootstrap.min.js(o se kenyelletse ka bobeli).

Haeba u sebelisa bundler (Webpack, Rollup…), u ka sebelisa /js/dist/*.jslifaele tse seng li loketse UMD.

Ho itšetleha

Li-plugins tse ling le likarolo tsa CSS li itšetlehile ka li-plugins tse ling. Haeba u kenyelletsa li-plugins ka bonngoe, etsa bonnete ba hore u hlahloba litšepiso tsena ho litokomane. Hape hlokomela hore li-plugins tsohle li itšetlehile ka jQuery (sena se bolela hore jQuery e tlameha ho kenngoa pele ho lifaele tsa plugin). Ikopanye le ronapackage.json ho bona hore na ke mefuta efe ea jQuery e tšehetsoeng.

Li-dropdown tsa rona, li-popovers le lisebelisoa tsa lisebelisoa li boetse li itšetlehile ka Popper.js .

Litšobotsi tsa data

Hoo e ka bang li-plugins tsohle tsa Bootstrap li ka nolofalloa le ho hlophisoa ka HTML feela ka lintlha tsa data (mokhoa oo re o ratang oa ho sebelisa ts'ebetso ea JavaScript). Etsa bonnete ba hore o sebelisa feela sete e le 'ngoe ea litšobotsi tsa data nthong e le' ngoe (mohlala, u ke ke ua qala sesebelisoa le modal ho tsoa konopo e le 'ngoe.)

Leha ho le joalo, maemong a mang ho ka ba ho lakatsehang ho thibela ts'ebetso ena. Ho tima API ea tšobotsi ea data, kopanya liketsahalo tsohle tse tokomaneng e nang le mabitso a data-apijoalo:

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

Ntle le moo, ho lebisa plugin e itseng, kenyelletsa feela lebitso la plugin joalo ka sebaka sa mabitso hammoho le sebaka sa mabitso sa data-api joalo ka:

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

Liketsahalo

Bootstrap e fana ka liketsahalo tsa tloaelo bakeng sa liketso tse ikhethang tsa li-plugins. Ka kakaretso, tsena li tla ka mokhoa o sa feleng le oa nako e fetileng - moo lentsoe le sa feleng (mohlala. show) le qalisoang qalong ea ketsahalo, 'me sebopeho sa eona sa nako e fetileng sa karolo (mohl. shown) se hlahisoang ha ketso e phethoa.

Liketsahalo tsohle tse sa feleng li fana ka preventDefault()ts'ebetso. Sena se fana ka bokhoni ba ho emisa ts'ebetso ea ketso pele e qala. Ho khutlisa leshano ho tsoa ho mohlokomeli oa liketsahalo ho tla letsetsa hape ka bohona preventDefault().

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

Programmatic API

Hape re lumela hore o lokela ho sebelisa li-plugins tsohle tsa Bootstrap feela ka JavaScript API. Li-API tsohle tsa sechaba ke mekhoa e le 'ngoe, e ka tsamaisoang ka ketane, 'me e khutlisetsa pokello e sebelisitsoeng.

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

Mekhoa eohle e lokela ho amohela ntho ea boikhethelo, khoele e lebisitseng mokhoa o itseng, kapa letho (e qalang plugin ka boits'oaro ba kamehla):

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

Plugin e 'ngoe le e' ngoe e boetse e pepesa sehahi sa eona se tala Constructorsetšeng: $.fn.popover.Constructor. Haeba u batla ho fumana mohlala o itseng oa plugin, e fumane ka kotloloho ho tsoa ho element: $('[rel="popover"]').data('popover').

Mesebetsi ea Asynchronous le liphetoho

Mekhoa eohle ea mananeo a API ha e lumellane 'me e khutlela ho motho ea letsetsang hang ha phetoho e qala empa pele e fela .

E le hore u phethe ketso hang ha phetoho e felile, u ka mamela ketsahalo e tsamaisanang le eona.

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

Ho feta moo, mohala oa mokhoa oa karolo ea phetoho o tla hlokomolohuoa .

$('#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 !!

Litlhophiso tsa kamehla

U ka fetola litlhophiso tsa kamehla tsa plugin ka ho fetola Constructor.Defaultntho ea plugin:

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

Ha ho khohlano

Ka linako tse ling hoa hlokahala ho sebelisa li-plugins tsa Bootstrap tse nang le meralo e meng ea UI. Maemong ana, ka linako tse ling ho ka ba le likhohlano tsa sebaka sa mabitso. Haeba sena se etsahala, u ka bitsa .noConflictplugin u lakatsa ho khutlisetsa boleng ba.

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

Linomoro tsa phetolelo

Mofuta oa e 'ngoe le e' ngoe ea li-plugins tsa Bootstrap's jQuery e ka fumaneha ka VERSIONthepa ea sehahi sa plugin. Ka mohlala, bakeng sa plugin ea tooltip:

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

Ha ho na liphoso tse ikhethileng ha JavaScript e koetsoe

Li-plugins tsa Bootstrap ha li khutlele morao haholo ha JavaScript e koetsoe. Haeba u tsotella boiphihlelo ba mosebelisi ntlheng ena, sebelisa <noscript>ho hlalosa boemo (le mokhoa oa ho lumella JavaScript hape) ho basebelisi ba hau, le/kapa eketsa liphoso tsa hau tsa tloaelo.

Util

Lifaele tsohle tsa JavaScript tsa Bootstrap li itšetlehile ka tsona util.js'me li tlameha ho kenyelletsoa hammoho le lifaele tse ling tsa JavaScript. Haeba u sebelisa compiled (kapa minified) bootstrap.js, ha ho hlokahale ho kenyelletsa sena - se se se ntse se le teng.

util.jse kenyelletsa mesebetsi ea lisebelisoa le mothusi oa motheo bakeng sa transitionEndliketsahalo hammoho le emulator ea phetoho ea CSS. E sebelisoa ke li-plugins tse ling ho lekola tšehetso ea phetoho ea CSS le ho ts'oara liphetoho tse leketlileng.

Sanitizer

Lisebelisoa le li-Popovers li sebelisa sanitizer ea rona e hahelletsoeng ka hare ho hloekisa likhetho tse amohelang HTML.

Boleng ba kamehla whiteListke bo latelang:

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

Haeba u batla ho eketsa boleng bo bocha sebakeng sena sa kamehla whiteListu ka etsa tse latelang:

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)

Haeba u batla ho qoba sanitizer ea rona hobane u khetha ho sebelisa laeborari e inehetseng, mohlala DOMpurify , u lokela ho etsa se latelang:

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