JavaScript

Portate Bootstrap in vita cù i nostri plugins JavaScript opzionali custruitu nantu à jQuery. Amparate nantu à ogni plugin, i nostri dati è opzioni di API di prugrammazione, è più.

Individuali o cumpilati

I plugins ponu esse inclusi individualmente (aduprendu l'individuu di Bootstrap js/dist/*.js), o tutti in una volta usendu bootstrap.jso minificati bootstrap.min.js(ùn include micca i dui).

Se aduprate un bundler (Webpack, Rollup...), pudete aduprà /js/dist/*.jsi fugliali chì sò pronti UMD.

Dipendenze

Certi plugins è cumpunenti CSS dipendenu da altri plugins. Se include plugins individualmente, assicuratevi di verificà queste dipendenze in i documenti. Innota ancu chì tutti i plugins dependenu di jQuery (questu significa chì jQuery deve esse inclusu prima di i schedarii di plugin). Cunsultate u nostrupackage.json per vede quali versioni di jQuery sò supportati.

I nostri dropdowns, popovers è tooltips dipendenu ancu da Popper.js .

Attributi di dati

Quasi tutti i plugins Bootstrap ponu esse attivati ​​​​è cunfigurati cù HTML solu cù attributi di dati (u nostru modu preferitu di utilizà a funziunalità JavaScript). Assicuratevi di utilizà solu un set di attributi di dati nantu à un elementu unicu (per esempiu, ùn pudete micca attivà un tooltip è modale da u stessu buttone).

Tuttavia, in certi situazioni, pò esse desiderate disattivà sta funziunalità. Per disattivà l'API di l'attributu di dati, unbind all events on the document namespaced with data-apilike this:

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

In alternativa, per destinà un plugin specificu, basta include u nome di u plugin cum'è un spaziu di nome cù u spaziu di nome data-api cum'è questu:

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

Avvenimenti

Bootstrap furnisce avvenimenti persunalizati per a maiò parte di l'azzioni uniche di i plugins. In generale, questi venenu in una forma di participiu infinitu è ​​passatu - induve l'infinitivu (es. show) hè attivatu à l'iniziu di un avvenimentu, è a so forma di participiu passatu (es. shown) hè attivatu à a fine di una azione.

Tutti l'avvenimenti infiniti furnisce preventDefault()funziunalità. Questu furnisce a capacità di piantà l'esekzione di un'azzione prima di principià. Riturnà falsi da un gestore di l'eventi chjamarà ancu automaticamente preventDefault().

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

API di prugrammazione

Cridemu ancu chì duvete esse capace di utilizà tutti i plugins Bootstrap puramente attraversu l'API JavaScript. Tutte l'API pubbliche sò metudi unichi, incatenati, è tornanu a cullezzione attuata.

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

Tutti i metudi duveranu accettà un oggettu d'opzioni opzionali, una stringa chì mira à un metudu particulari, o nunda (chì inizia un plugin cù un cumpurtamentu predeterminatu):

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

Ogni plugin espone ancu u so custruttore crudu nantu à una Constructorpruprietà: $.fn.popover.Constructor. Se vulete acquistà una istanza di plugin particulari, ricuperà direttamente da un elementu: $('[rel="popover"]').data('popover').

Funzioni asincrone è transizioni

Tutti i metudi di API di prugrammazione sò asincroni è tornanu à u chjamante una volta chì a transizione hè iniziata, ma prima di finisce .

Per eseguisce una azzione una volta chì a transizione hè cumpleta, pudete sente l'avvenimentu currispundente.

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

Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

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

Paràmetri predeterminati

Pudete cambià i paràmetri predeterminati per un plugin mudificà l' Constructor.Defaultughjettu di u plugin:

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

Nisun cunflittu

A volte hè necessariu di utilizà plugins Bootstrap cù altri frameworks UI. In queste circustanze, i collisioni di u spaziu di nomi ponu accade in ocasioni. Se questu succede, pudete chjamà .noConflictu plugin chì vulete rinvià u valore.

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

Numeri di versione

A versione di ognuna di i plugins jQuery di Bootstrap pò esse accessu via a VERSIONpruprietà di u custruttore di u plugin. Per esempiu, per u plugin tooltip:

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

Nisuna fallback speciale quandu JavaScript hè disattivatu

I plugins di Bootstrap ùn tornanu micca particularmente grazia quandu JavaScript hè disattivatu. Se ti interessa l'esperienza di l'utilizatori in questu casu, aduprate <noscript>per spiegà a situazione (è cumu riattivate JavaScript) à i vostri utilizatori, è / o aghjunghje i vostri propri fallbacks persunalizati.

Util

Tutti i fugliali JavaScript di Bootstrap dipendenu util.jsè deve esse inclusu cù l'altri schedari JavaScript. Sè vo aduprate u compilatu (o minificatu) bootstrap.js, ùn ci hè bisognu di include questu - hè digià quì.

util.jsinclude funzioni di utilità è un aiutu di basa per transitionEndl'avvenimenti è ancu un emulatore di transizione CSS. Hè utilizatu da l'altri plugins per verificà u supportu di transizione CSS è per catturà transizioni pendenti.

Sanitizer

Tooltips è Popovers utilizanu u nostru sanitizer integratu per sanitizà l'opzioni chì accettanu HTML.

whiteListU valore predeterminatu hè u seguente:

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

Se vulete aghjunghje novi valori à questu predefinitu whiteList, pudete fà e seguenti:

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)

Se vulete sguassate u nostru disinfettante perchè preferite aduprà una biblioteca dedicata, per esempiu DOMPurify , duvete fà ciò chì segue:

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