Bootstrap: CSS linken
We beginnen telkens met de bootstrap.min.css (lokaal of via CDN) in onze Head-tag te linken.
Via CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">Lokaal:
<link rel="stylesheet" href="./css/bootstrap.min.css">Welke CSS moeten we hebben?
Bemerk dat we de versie ‘bootstrap.min.css’ verkiezen; dit is de volledige versie.
Als we enkel het grid-systeem van BS wensen te gebruiken kunnen we in de plaats hiervan de ‘bootstrap-grid.min.css’ inladen.
Als we met een lokale versie van bootstrap werken moeten we deze bestanden natuurlijk eerst terugvinden.
Hiervoor gaan we opnieuw naar de
website van getbootstrap.com waar we de bestanden kunnen downloaden.
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.
We kopiëren de CSS folder naar onze projectmap en kunnen bijgevolg ‘bootstrap.min.css’ vanuit de CSS subfolder inladen. Desgewenst kunnen we de andere bestanden vanuit deze map verwijderen.
Volgorde van Stylesheets
Bemerk dat we onze eigen stylesheets altijd ONDER de stylesheets plaatsen die we van bootstrap en andere bronnen verkrijgen.
Hierdoor kunnen we de externe stylesheets makkelijker overschrijven en wordt het minder waarschijnlijk dat deze externe stylesheets onze eigen styling gaan beïnvloeden.