Bootstrap: JS linken
Bootstrap JS
Deze topic bespreekt hoe je de Javascript functionaliteiten van Bootstrap kan inladen en gebruiken. Het is gelijkaardig aan de CSS die we inladen en dus niet moeilijk. Maar aangezien we javascript nog niet besproken hebben is het ook niet essentieel om dit gedeelte reeds te begrijpen en kunnen toepassen…
Als we de javascript functionaliteiten van Bootstrap willen gebruiken dan moeten we de gerelateerde javascript bestanden net boven de Body-sluittag toevoegen.
De volgorde is hierbij van belang:
- jquery.js
- popper.js
- bootstrap.min.js
- (eventuele) eigen javascript scripts
Via CDN:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>We zagen reeds hoe we de Bootstrap CSS konden terugvinden om deze lokaal in te laden.
Voor de Bootstrap JS gaan we opnieuw naar de website van getbootstrap en volgen we dezelfde procedure om het JS mapje te bekomen.
Hier zie je een grote knop “Getting Started” waarmee je naar een pagina gaat met aan de linkerkant “download” in het menu. Op de download pagina kies je dan voor “Compiled CSS/JS”. Eens je dit bestand hebt gedownload kan je het unzippen en zie je een CSS en een JS folder.
Hier vinden we het mapje JS dat we naar onze projectmap kunnen kopiëren.
Op de website van jquery kunnen we verder de gecomprimeerde versie van jquery downloaden en ook deze willen we in het js-mapje plaatsen.
Jquery en Popper
Bemerk dat Jquery en popper gebruikt worden voor bepaalde JS componenten (modals, popovers, …).
Je hebt deze dus niet in elk project nodig.
Bemerking JS folder
Bemerk dat als we Javascript functionaliteiten van Bootstrap wensen te gebruiken we ook jquery.js moeten downloaden en toevoegen aan de JS map (want deze staat hier niet in).
Popper.js is reeds verwerkt in ‘bootstrap.bundle.min.js’ dus mits we de “bundle”-versie kiezen (i.p.v. de ‘bootstrap.min.js’ versie) moeten we popper.js niet apart inladen.