JavaScript

Oživite Bootstrap pomoću naših opcionih JavaScript dodataka. Saznajte više o svakom dodatku, našim podacima i programskim API opcijama i još mnogo toga.

Na ovoj stranici

Pojedinačno ili sastavljeno

Dodaci se mogu uključiti pojedinačno (koristeći Bootstrap individual js/dist/*.js), ili svi odjednom koristeći bootstrap.jsili minimizirati bootstrap.min.js(nemojte uključivati oba).

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

Upotreba sa JavaScript okvirima

Dok se Bootstrap CSS može koristiti sa bilo kojim okvirom, Bootstrap JavaScript nije u potpunosti kompatibilan sa JavaScript okvirima kao što su React, Vue i Angular koji pretpostavljaju potpuno poznavanje DOM-a. I Bootstrap i framework mogu pokušati da mutiraju isti DOM element, što rezultira greškama poput padajućih menija koji su zaglavljeni u "otvorenoj" poziciji.

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

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

Korištenje Bootstrapa kao modula

Probajte sami! Preuzmite izvorni kod i radni demo za korištenje Bootstrapa kao ES modula iz twbs/examples spremišta . Također možete otvoriti primjer u StackBlitz-u .

Nudimo verziju Bootstrapa napravljenu kao ESM( bootstrap.esm.jsi bootstrap.esm.min.js) koja vam omogućava da koristite Bootstrap kao modul u pretraživaču, ako ga vaši ciljani pretraživači podržavaju .

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

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

U poređenju sa JS paketima, korišćenje ESM-a u pretraživaču zahteva da koristite punu putanju i ime datoteke umesto naziva modula. Pročitajte više o JS modulima u pretraživaču. Zato koristimo 'bootstrap.esm.min.js'umjesto 'bootstrap'gore navedenog. Međutim, ovo je dodatno komplikovano našom zavisnošću od Poppera, koja uvozi Popper u naš JavaScript na sljedeći način:

import * as Popper from "@popperjs/core"

Ako pokušate ovo kako jeste, vidjet ćete greš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 an importmapza rješavanje proizvoljnih imena modula da dovršite staze. Ako vaši ciljani pretraživači ne podržavaju importmap, morat ćete koristiti projekt es-module-shims . Evo kako to funkcionira 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>

Zavisnosti

Neki dodaci i CSS komponente zavise od drugih dodataka. Ako uključite dodatke pojedinačno, provjerite ima li ovih ovisnosti u dokumentima.

Naši padajući menii, skočni prozori i opisi alata takođe zavise od Poppera .

Atributi podataka

Gotovo svi dodaci za Bootstrap mogu se omogućiti i konfigurirati samo putem HTML-a sa atributima podataka (naš preferirani način korištenja JavaScript funkcionalnosti). Budite sigurni da koristite samo jedan skup atributa podataka na jednom elementu (npr. ne možete pokrenuti opis alata i modal pomoću 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 tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija 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 smjestiti jednostavnu konfiguraciju komponente kao JSON string. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456i odvojeni atributi podataka će nadjačati vrijednosti date 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 native querySelectori querySelectorAllmetode za ispitivanje DOM elemenata iz razloga performansi, tako da morate koristiti važeće selektore . Ako koristite posebne selektore poput collapse:Example, svakako ih pobjegnite.

Događaji

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

Svi infinitivni događaji pružaju preventDefault()funkcionalnost. Ovo pruža mogućnost zaustavljanja izvršenja akcije prije nego što ona počne. Vraćanje false iz obrađivača događaja će također 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 prihvataju opcioni objekat opcija ili ništa (koji pokreće dodatak sa svojim podrazumevanim 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 da dobijete određenu instancu dodatka, svaki dodatak izlaže getInstancemetodu. Na primjer, da preuzmete instancu direktno 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 kreiranje novog u slučaju da nije inicijaliziran.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

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

CSS selektori u konstruktorima

Pored metoda getInstancei getOrCreateInstance, svi konstruktori dodataka mogu prihvatiti DOM element ili važeći CSS selektor kao prvi argument. Elementi dodataka se nalaze pomoću querySelectormetode 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 pozivaocu kada se tranzicija pokrene, ali prije nego što se završi . Da biste izvršili radnju kada je tranzicija završena, 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 prelaznu komponentu će biti 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 može izgledati ispravno koristiti disposemetodu odmah nakon hide(), to će dovesti do pogrešnih rezultata. Evo primjera upotrebe problema:

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

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

Zadane postavke

Možete promijeniti zadane postavke za dodatak mijenjanjem objekta dodatka Constructor.Default:

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

Metode i svojstva

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

Metoda	Opis
`dispose`	Uništava modalni element. (Uklanja pohranjene podatke na DOM elementu)
`getInstance`	Statička metoda koja vam omogućava da dobijete modalnu instancu pridruženu DOM elementu.
`getOrCreateInstance`	Statička metoda koja vam omogućava da dobijete modalnu instancu pridruženu DOM elementu ili kreirate novu u slučaju da nije inicijalizirana.

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

Sanitizer

Tooltips i Popovers koriste naše ugrađeno sredstvo za dezinfekciju za saniranje opcija koje prihvataju 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 da dodate nove vrijednosti ovom zadanom 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še sredstvo za čišćenje jer više volite koristiti namjensku biblioteku, na primjer DOMPurify , trebate učiniti sljedeće:

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

Opciono koristeći jQuery

Ne treba vam jQuery u Bootstrapu 5 , ali je i dalje moguće koristiti naše komponente sa jQueryjem. Ako Bootstrap otkrije jQueryu windowobjektu, on će dodati sve naše komponente u sistem dodataka jQuery. Ovo vam omogućava da uradite sledeć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 važi i za naše ostale komponente.

Nema sukoba

Ponekad je potrebno koristiti dodatke za Bootstrap sa drugim UI okvirima. U ovim okolnostima povremeno se mogu dogoditi kolizije 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. Uprkos .noConflictdogađajima i događajima u imenskom prostoru, mogu postojati problemi s kompatibilnošću koje morate sami riješiti.

jQuery događaji

Bootstrap će otkriti jQuery ako jQueryje prisutan u windowobjektu i nema data-bs-no-jquerypostavljenog atributa na <body>. Ako se jQuery pronađe, Bootstrap će emitovati događaje zahvaljujući jQuery sistemu događaja. Dakle, ako želite da slušate Bootstrap događaje, moraćete da koristite jQuery metode ( .on, .one) umesto addEventListener.

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

Onemogućen JavaScript

Bootstrap-ovi dodaci nemaju posebnu rezervu kada je JavaScript onemogućen. Ako vam je stalo do korisničkog iskustva u ovom slučaju, koristite <noscript>da objasnite situaciju (i kako da ponovo omogućite JavaScript) svojim korisnicima, i/ili dodajte svoje vlastite prilagođene rezerve.