JavaScript
Oživite Bootstrap s našim dodatnim JavaScript dodacima izgrađenim na jQueryju. Saznajte više o svakom dodatku, našim podacima i opcijama programskog API-ja i više.
Dodaci se mogu uključiti pojedinačno (koristeći Bootstrapove pojedinačne *.js
datoteke) ili sve odjednom pomoću bootstrap.js
ili umanjenog bootstrap.min.js
(nemojte uključivati oboje).
Neki dodaci i CSS komponente ovise o drugim dodacima. Ako dodate dodatke pojedinačno, svakako provjerite te ovisnosti u dokumentima. Također imajte na umu da svi dodaci ovise o jQueryju (to znači da jQuery mora biti uključen prije datoteka dodataka). Posavjetujte se s našimpackage.json
da biste vidjeli koje su verzije jQueryja podržane.
Naši padajući izbornici, skočni prozori i opisi alata također ovise o Popper.js .
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.)
Međutim, u nekim situacijama može biti poželjno onemogućiti ovu funkciju. Da biste onemogućili API atributa podataka, odvežite sve događaje na prostoru imena dokumenta data-api
ovako:
$(document).off('.data-api')
Alternativno, da ciljate određeni dodatak, samo uključite naziv dodatka kao prostor imena zajedno s prostorom imena data-api ovako:
$(document).off('.alert.data-api')
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()
.
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Također vjerujemo da biste trebali moći koristiti sve Bootstrap dodatke isključivo putem JavaScript API-ja. Svi javni API-ji su pojedinačne, ulančane metode i vraćaju zbirku na koju se djeluje.
$('.btn.danger').button('toggle').addClass('fat')
Sve metode trebaju prihvatiti opcijski objekt opcija, niz koji cilja na određenu metodu ili ništa (što pokreće dodatak sa zadanim ponašanjem):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Svaki dodatak također izlaže svoj neobrađeni konstruktor na Constructor
svojstvu: $.fn.popover.Constructor
. Ako želite dobiti određenu instancu dodatka, dohvatite je izravno iz elementa: $('[rel="popover"]').data('popover')
.
Sve programske API metode su asinkrone i vraćaju se pozivatelju kada prijelaz započne, ali prije nego što završi .
Kako biste izvršili radnju nakon završetka prijelaza, možete slušati odgovarajući događaj.
$('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded
})
Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .
$('#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 !!
Zadane postavke dodatka možete promijeniti izmjenom Constructor.Default
objekta dodatka:
$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false
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 .noConflict
dodatak kojem želite vratiti vrijednost.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Verziji svakog Bootstrapovog jQuery dodatka može se pristupiti putem VERSION
svojstva konstruktora dodatka. Na primjer, za dodatak s opisom alata:
$.fn.tooltip.Constructor.VERSION // => "4.0.0"
Bootstrapovi dodaci ne vraćaju se osobito graciozno 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.
Knjižnice trećih strana
Bootstrap službeno ne podržava JavaScript biblioteke trećih strana kao što su Prototype ili jQuery UI. Unatoč .noConflict
događajima u prostoru imena, može doći do problema s kompatibilnošću koje morate sami riješiti.
Sve Bootstrapove JavaScript datoteke ovise o util.js
i moraju biti uključene uz druge JavaScript datoteke. Ako koristite kompilirani (ili umanjeni) bootstrap.js
, nema potrebe uključivati ovo—već je tu.
util.js
uključuje uslužne funkcije i osnovni pomoćnik za transitionEnd
događaje kao i CSS emulator prijelaza. Koriste ga drugi dodaci za provjeru podrške za CSS prijelaze i za hvatanje visećih prijelaza.