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 per 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 (e) {
  if (!data) return e.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 (e) {
  // 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 (e) {
  $('#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:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.1.3"

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.