JavaScript

Doneu vida a Bootstrap amb els nostres connectors de JavaScript opcionals basats en jQuery. Obteniu informació sobre cada connector, les nostres opcions de dades i API programàtiques i molt més.

Individual o compilat

Els connectors es poden incloure individualment (utilitzant l'individu de Bootstrap js/dist/*.js), o tots alhora utilitzant bootstrap.jso minificats bootstrap.min.js(no incloure tots dos).

Si utilitzeu un paquet (Webpack, Rollup...), podeu utilitzar /js/dist/*.jsfitxers que estiguin preparats per UMD.

Dependències

Alguns connectors i components CSS depenen d'altres connectors. Si incloeu connectors individualment, assegureu-vos de comprovar aquestes dependències als documents. Tingueu en compte també que tots els connectors depenen de jQuery (això significa que jQuery s'ha d'incloure abans dels fitxers de connectors). Consulteu el nostrepackage.json per veure quines versions de jQuery són compatibles.

Els nostres menús desplegables, finestres emergents i informació sobre eines també depenen de Popper.js .

Atributs de dades

Gairebé tots els connectors Bootstrap es poden habilitar i configurar només mitjançant HTML amb atributs de dades (la nostra manera preferida d'utilitzar la funcionalitat de JavaScript). Assegureu-vos d' utilitzar només un conjunt d'atributs de dades en un sol element (p. ex., no podeu activar una informació sobre eines i un modal des del mateix botó).

Tanmateix, en algunes situacions pot ser desitjable desactivar aquesta funcionalitat. Per desactivar l'API de l'atribut de dades, desvinculeu tots els esdeveniments del document amb espai de noms data-apiaixí:

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

Alternativament, per orientar un connector específic, només cal incloure el nom del connector com a espai de noms juntament amb l'espai de noms de l'api de dades com aquest:

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

Esdeveniments

Bootstrap ofereix esdeveniments personalitzats per a les accions úniques de la majoria dels connectors. Generalment, aquests vénen en una forma d'infinitiu i de participi passat, on l'infinitiu (p. ex. show) s'activa a l'inici d'un esdeveniment i la seva forma de participi passat (p. ex. shown) s'activa en completar una acció.

Tots els esdeveniments infinitius proporcionen preventDefault()funcionalitat. Això proporciona la possibilitat d'aturar l'execució d'una acció abans que comenci. Si retorneu false des d'un controlador d'esdeveniments, també es trucarà automàticament preventDefault().

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

API programàtica

També creiem que hauríeu de poder utilitzar tots els connectors Bootstrap només mitjançant l'API de JavaScript. Totes les API públiques són mètodes únics que es poden encadenar i retornen la col·lecció sobre la qual s'ha actuat.

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

Tots els mètodes haurien d'acceptar un objecte d'opcions opcionals, una cadena que tingui com a objectiu un mètode concret o res (que iniciï un connector amb un comportament predeterminat):

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

Cada connector també exposa el seu constructor en brut en una Constructorpropietat: $.fn.popover.Constructor. Si voleu obtenir una instància de connector concreta, recupera-la directament d'un element: $('[rel="popover"]').data('popover').

Funcions asíncrones i transicions

Tots els mètodes de l'API programàtica són asíncrons i tornen a la persona que truca un cop s'inicia la transició però abans que acabi .

Per executar una acció un cop finalitzada la transició, podeu escoltar l'esdeveniment corresponent.

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

A més, s'ignorarà una crida de mètode a un component en transició .

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

Configuració per defecte

Podeu canviar la configuració predeterminada d'un connector modificant l' Constructor.Defaultobjecte del connector:

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

Cap conflicte

De vegades és necessari utilitzar connectors Bootstrap amb altres marcs d'interfície d'usuari. En aquestes circumstàncies, ocasionalment es poden produir col·lisions d'espais de noms. Si això passa, podeu trucar .noConflictal connector del qual voleu revertir el valor.

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

Números de versió

Es pot accedir a la versió de cadascun dels connectors jQuery de Bootstrap mitjançant la VERSIONpropietat del constructor del connector. Per exemple, per al connector tooltip:

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

No hi ha alternatives especials quan JavaScript està desactivat

Els connectors d'Bootstrap no cauen especialment amb gràcia quan JavaScript està desactivat. Si t'importa l'experiència de l'usuari en aquest cas, fes servir <noscript>per explicar la situació (i com tornar a activar JavaScript) als teus usuaris i/o afegir les teves pròpies alternatives personalitzades.

Útil

Tots els fitxers JavaScript de Bootstrap depenen util.jsi s'han d'incloure juntament amb els altres fitxers JavaScript. Si utilitzeu el compilat (o minificat) bootstrap.js, no cal incloure-ho; ja hi és.

util.jsinclou funcions d'utilitat i un ajudant bàsic per a transitionEndesdeveniments, així com un emulador de transició CSS. Els altres connectors l'utilitzen per comprovar la compatibilitat amb la transició CSS ​​i per capturar les transicions penjades.

Desinfectant

Els consells sobre eines i les finestres emergents utilitzen el nostre desinfectador integrat per desinfectar les opcions que accepten HTML.

El valor per defecte whiteListés el següent:

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', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Si voleu afegir nous valors a aquest valor predeterminat whiteList, podeu fer el següent:

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)

Si voleu evitar el nostre desinfectant perquè preferiu utilitzar una biblioteca dedicada, per exemple DOMPurify , hauríeu de fer el següent:

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