JavaScript

Dai vita a Bootstrap con i nostri plugin JavaScript opzionali basati su jQuery. Scopri ogni plug-in, i nostri dati e le opzioni dell'API programmatica e altro ancora.

Individuale o compilato

I plugin possono essere inclusi individualmente (usando l'individuale di Bootstrap js/dist/*.js) o tutti in una volta usando bootstrap.jso minimizzati bootstrap.min.js(non includerli entrambi).

Se utilizzi un bundler (Webpack, Rollup...), puoi utilizzare /js/dist/*.jsfile che sono pronti per UMD.

Dipendenze

Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi i plug-in singolarmente, assicurati di controllare queste dipendenze nei documenti. Nota inoltre che tutti i plugin dipendono da jQuery (questo significa che jQuery deve essere incluso prima dei file del plugin). Consulta il nostropackage.json per vedere quali versioni di jQuery sono supportate.

Anche i nostri menu a discesa, popover e suggerimenti dipendono da Popper.js .

Attributi dei dati

Quasi tutti i plug-in Bootstrap possono essere abilitati e configurati tramite HTML solo con attributi di dati (il nostro modo preferito di utilizzare la funzionalità JavaScript). Assicurati di utilizzare solo un set di attributi di dati su un singolo elemento (ad esempio, non puoi attivare una descrizione comando e modale dallo stesso pulsante).

Tuttavia, in alcune situazioni può essere opportuno disabilitare questa funzionalità. Per disabilitare l'API dell'attributo dei dati, separa tutti gli eventi sullo spazio dei nomi del documento in data-apiquesto modo:

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

In alternativa, per indirizzare un plug-in specifico, includi semplicemente il nome del plug-in come spazio dei nomi insieme allo spazio dei nomi data-api in questo modo:

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

Eventi

Bootstrap fornisce eventi personalizzati per le azioni uniche della maggior parte dei plugin. Generalmente, questi si presentano in una forma di participio passato e infinito, in cui l'infinito (es. show) viene attivato all'inizio di un evento e la sua forma participio passato (es. shown) viene attivata al completamento di un'azione.

Tutti gli eventi infiniti forniscono preventDefault()funzionalità. Ciò fornisce la possibilità di interrompere l'esecuzione di un'azione prima che inizi. Anche la restituzione di false da un gestore di eventi chiamerà automaticamente preventDefault().

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

API programmatica

Riteniamo inoltre che dovresti essere in grado di utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API JavaScript. Tutte le API pubbliche sono metodi singoli, concatenabili e restituiscono la raccolta su cui si è agito.

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

Tutti i metodi dovrebbero accettare un oggetto opzioni opzionale, una stringa che ha come target un metodo particolare o niente (che avvia un plug-in con un comportamento predefinito):

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

Ogni plugin espone anche il suo costruttore grezzo su una Constructorproprietà: $.fn.popover.Constructor. Se desideri ottenere una particolare istanza di plugin, recuperala direttamente da un elemento: $('[rel="popover"]').data('popover').

Funzioni e transizioni asincrone

Tutti i metodi API programmatici sono asincroni e ritornano al chiamante una volta avviata la transizione ma prima che termini .

Per eseguire un'azione una volta completata la transizione, è possibile ascoltare l'evento corrispondente.

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

Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .

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

Impostazioni predefinite

È possibile modificare le impostazioni predefinite per un plug-in modificando l' Constructor.Defaultoggetto del plug-in:

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

Nessun conflitto

A volte è necessario utilizzare i plug-in Bootstrap con altri framework dell'interfaccia utente. In queste circostanze, possono verificarsi occasionalmente collisioni nello spazio dei nomi. Se ciò accade, puoi richiamare .noConflictil plugin di cui desideri ripristinare il valore.

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

Numeri di versione

È possibile accedere alla versione di ciascuno dei plugin jQuery di Bootstrap tramite la VERSIONproprietà del costruttore del plugin. Ad esempio, per il plug-in del suggerimento:

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

Nessun fallback speciale quando JavaScript è disabilitato

I plugin di Bootstrap non ricadono in modo particolarmente elegante quando JavaScript è disabilitato. Se ti interessa l'esperienza dell'utente in questo caso, usa <noscript>per spiegare la situazione (e come riattivare JavaScript) ai tuoi utenti e/o aggiungi i tuoi fallback personalizzati.

Util

Tutti i file JavaScript di Bootstrap dipendono util.jse devono essere inclusi insieme agli altri file JavaScript. Se stai usando compiled (o minimizzato) bootstrap.js, non è necessario includerlo: è già lì.

util.jsinclude funzioni di utilità e un supporto di base per transitionEndgli eventi, nonché un emulatore di transizione CSS. Viene utilizzato dagli altri plugin per verificare il supporto della transizione CSS e per rilevare le transizioni sospese.

Disinfettante

Tooltip e Popover utilizzano il nostro disinfettante integrato per disinfettare le opzioni che accettano HTML.

Il whiteListvalore predefinito è il 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 vuoi aggiungere nuovi valori a questo valore predefinito whiteListpuoi fare quanto segue:

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 vuoi bypassare il nostro igienizzante perché preferisci utilizzare una libreria dedicata, ad esempio DOMPurify , dovresti fare quanto segue:

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