JavaScript

Oživite Bootstrap s našim dodatnim JavaScript dodacima. Saznajte više o svakom dodatku, našim podacima i opcijama programskog API-ja i više.

Na ovoj stranici

Pojedinačni ili sastavljeni

Dodaci se mogu uključiti pojedinačno (koristeći Bootstrap's individual js/dist/*.js), ili sve odjednom pomoću bootstrap.jsili umanjenog bootstrap.min.js(nemojte uključivati oboje).

Ako koristite skupljač (Webpack, Parcel, Vite…), možete koristiti /js/dist/*.jsdatoteke koje su spremne za UMD.

Upotreba s JavaScript okvirima

Dok se Bootstrap CSS može koristiti s bilo kojim okvirom, Bootstrap JavaScript nije u potpunosti kompatibilan s JavaScript okvirima kao što su React, Vue i Angular koji pretpostavljaju potpuno poznavanje DOM-a. I Bootstrap i okvir mogu pokušati mutirati isti DOM element, što rezultira greškama poput padajućih menija koji su zapeli u "otvorenom" položaju.

Bolja alternativa za one koji koriste ovu vrstu okvira je korištenje paketa specifičnog za okvir umjesto Bootstrap JavaScripta. Evo nekih od najpopularnijih opcija:

React: React Bootstrap
Vue: BootstrapVue (trenutno podržava samo Vue 2 i Bootstrap 4)
Angular: ng-bootstrap

Korištenje Bootstrapa kao modula

Pokušajte sami! Preuzmite izvorni kod i radni demo za korištenje Bootstrapa kao ES modula iz repozitorija twbs/examples . Također možete otvoriti primjer u StackBlitzu .

Nudimo verziju Bootstrapa izgrađenu kao ESM( bootstrap.esm.jsi bootstrap.esm.min.js) koja vam omogućuje korištenje Bootstrapa kao modula u pregledniku, ako to vaši ciljani preglednici podržavaju .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

U usporedbi s JS paketima, korištenje ESM-a u pregledniku zahtijeva upotrebu pune staze i naziva datoteke umjesto naziva modula. Pročitajte više o JS modulima u pregledniku. Zato koristimo 'bootstrap.esm.min.js'umjesto 'bootstrap'gore navedenog. Međutim, ovo je dodatno komplicirano našom ovisnošću o Popperu, koja uvozi Popper u naš JavaScript ovako:

import * as Popper from "@popperjs/core"

Ako pokušate ovo kakvo jest, vidjet ćete pogrešku na konzoli poput sljedeće:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Da biste to popravili, možete koristiti importmapza rješavanje proizvoljnih naziva modula za dovršetak staza. Ako ciljani preglednici ne podržavaju importmap, morat ćete koristiti projekt es-module-shims . Evo kako to radi za Bootstrap i Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Ovisnosti

Neki dodaci i CSS komponente ovise o drugim dodacima. Ako dodate dodatke pojedinačno, svakako provjerite te ovisnosti u dokumentima.

Naši padajući izbornici, skočni prozori i opisi alata također ovise o Popperu .

Atributi podataka

Gotovo svi Bootstrap dodaci mogu se omogućiti i konfigurirati samo putem HTML-a s atributima podataka (naš preferirani način korištenja JavaScript funkcionalnosti). Pazite da koristite samo jedan skup atributa podataka na jednom elementu (npr. ne možete pokrenuti opis alata i modal s istog gumba.)

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Selektori

Koristimo izvorne metode querySelectori querySelectorAllza postavljanje upita DOM elementima zbog performansi, tako da morate koristiti važeće selektore . Ako koristite posebne selektore poput collapse:Example, svakako ih izbjegnite.

Događaji

Bootstrap pruža prilagođene događaje za većinu jedinstvenih radnji dodataka. Općenito, oni dolaze u obliku infinitiva i participa prošlosti - gdje se infinitiv (npr. show) pokreće na početku događaja, a njegov oblik participa prošlosti (npr. shown) se pokreće nakon završetka radnje.

Svi infinitivni događaji pružaju preventDefault()funkcionalnost. Ovo pruža mogućnost zaustavljanja izvršenja radnje prije nego što započne. Vraćanje false iz rukovatelja događajem također će automatski pozvati preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Programski API

Svi konstruktori prihvaćaju neobavezni objekt opcija ili ništa (što pokreće dodatak sa svojim zadanim ponašanjem):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Ako želite dobiti određenu instancu dodatka, svaki dodatak izlaže getInstancemetodu. Na primjer, za dohvaćanje instance izravno iz elementa:

bootstrap.Popover.getInstance(myPopoverEl)

Ova metoda će se vratiti nullako se instanca ne pokrene preko traženog elementa.

Alternativno, getOrCreateInstancemože se koristiti za dobivanje instance povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

U slučaju da instanca nije inicijalizirana, može prihvatiti i koristiti neobavezni konfiguracijski objekt kao drugi argument.

CSS selektori u konstruktorima

Uz metode getInstancei getOrCreateInstance, svi konstruktori dodataka mogu prihvatiti DOM element ili valjani CSS selektor kao prvi argument. Elementi dodataka nalaze se querySelectormetodom jer naši dodaci podržavaju samo jedan element.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Asinkrone funkcije i prijelazi

Sve programske API metode su asinkrone i vraćaju se pozivatelju nakon pokretanja prijelaza, ali prije nego što završi . Kako biste izvršili radnju nakon završetka prijelaza, možete slušati odgovarajući događaj.

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

`dispose`metoda

Iako se može činiti ispravnim koristiti disposemetodu odmah nakon hide(), to će dovesti do netočnih rezultata. Evo primjera korištenja problema:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Zadane postavke

Zadane postavke dodatka možete promijeniti izmjenom Constructor.Defaultobjekta dodatka:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Metode i svojstva

Svaki Bootstrap dodatak izlaže sljedeće metode i statička svojstva.

metoda	Opis
`dispose`	Uništava modal elementa. (Uklanja pohranjene podatke na DOM elementu)
`getInstance`	Statička metoda koja vam omogućuje da dobijete modalnu instancu povezanu s DOM elementom.
`getOrCreateInstance`	Statička metoda koja vam omogućuje dobivanje modalne instance povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana.

Statičko svojstvo	Opis
`NAME`	Vraća naziv dodatka. (Primjer: `bootstrap.Tooltip.NAME`)
`VERSION`	Verziji svakog Bootstrapovog dodatka može se pristupiti putem `VERSION`svojstva konstruktora dodatka (Primjer: `bootstrap.Tooltip.VERSION`)

Sredstvo za dezinfekciju

Tooltips i Popovers koriste naš ugrađeni sanitizer za čišćenje opcija koje prihvaćaju HTML.

Zadana allowListvrijednost je sljedeća:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
  // 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: []
}

Ako želite dodati nove vrijednosti ovoj zadanoj postavci allowList, možete učiniti sljedeće:

const myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Ako želite zaobići naš sanitizer jer više volite koristiti namjensku biblioteku, na primjer DOMPurify , trebali biste učiniti sljedeće:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Po želji korištenjem jQueryja

Ne trebate jQuery u Bootstrapu 5 , ali svejedno je moguće koristiti naše komponente s jQueryjem. Ako Bootstrap otkrije jQueryu windowobjektu, dodati će sve naše komponente u jQueryjev sustav dodataka. To vam omogućuje sljedeće:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Isto vrijedi i za ostale naše komponente.

Nema sukoba

Ponekad je potrebno koristiti Bootstrap dodatke s drugim UI okvirima. U tim okolnostima povremeno može doći do sukoba prostora imena. Ako se to dogodi, možete pozvati .noConflictdodatak kojem želite vratiti vrijednost.

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

Bootstrap službeno ne podržava JavaScript biblioteke trećih strana kao što su Prototype ili jQuery UI. Unatoč .noConflictdogađajima u prostoru imena, može doći do problema s kompatibilnošću koje morate sami riješiti.

jQuery događaji

Bootstrap će otkriti jQuery ako jQueryje prisutan u windowobjektu, a data-bs-no-jqueryatribut nije postavljen na <body>. Ako se pronađe jQuery, Bootstrap će emitirati događaje zahvaljujući jQuery sustavu događaja. Dakle, ako želite slušati Bootstrapove događaje, morat ćete koristiti jQuery metode ( .on, .one) umjesto addEventListener.

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

Onemogućen JavaScript

Bootstrapovi dodaci nemaju posebne zamjene kada je JavaScript onemogućen. Ako vam je u ovom slučaju stalo do korisničkog iskustva, upotrijebite <noscript>kako biste svojim korisnicima objasnili situaciju (i kako ponovno omogućiti JavaScript) i/ili dodajte vlastite prilagođene zamjene.