08 nov Bootstrap 4 Installatie handmatig
Bootstrap 4 handmatige installatie
Om het framework volledig vanaf nul te bekijken zullen wij de minimale handmatige installatie van het framework uitvoeren, zodat je als frontend developer weet wat er allemaal nodig is om bootstrap te draaien.Ga naar: www.getbootstrap.com en klik op de download knop en vervolgens op download source.
Dit geeft je een waslijst aan bestanden die we niet allemaal nodig hebben. Wij zullen gebruik maken van de dist folder. Kopieer hieruit enkel de js en css folder naar je project.
- Maak een nieuw project aan (folder): bootstraptemplate
- Maak een index.html pagina aan in je project folder
- Ga naar: http://getbootstrap.com/docs/4.0/getting-started/introduction/ – hier kan je de startertemplate code kopiëren en plakken in je index.html bestand.
- Kopieer de js en css folder van de bootstrap source code uit de dist folder nu naar naar je project folder.
- Download de javascript library JQUERY van https://www.jquery.com/download en kies voor “download the compressed, producten jquery 3…”. Hernoem vervolgens dit bestand naar jquery-min.js en plak deze in de js folder van je project.
- De enige uitzondering momenteel is de javascript library POPPER. Zij maken momenteel geen gebruik van gecompilede bestanden. Hier zullen we de de CDN link moeten gebruiken die reeds standaard in je html code staat verwerkt.
- We vervangen de CDN links van de BOOTSTRAP.CSS, JQUERY.JS en BOOTSTRAP.JS door onze lokale bestanden.
MINIFIED.
We hebben telkens gekozen voor de min versie van de bootstrap, jquery en bootstrap bestanden. De minified versie zorgt ervoor dat alle lijnen code op 1 lijn worden geschreven en de spaties worden overal weggewerkt. Deze code is NIET leesbaar maar zorgt voor een aanzienlijke snelheid bij het laden van een webpagina.
Om minified bestanden toch te kunnen aanpassen maken we gebruik van een tool die we een preprocessor noemen.
Er zijn veel verschillende versies op de markt gaande van gratis preprocessors tot betalende. De applicatie die wij gebruiken is “PREPROS”. De keuze is eigenlijk aan jullie als developers wat jullie het meest gebruiksvriendelijk vinden uiteindelijk. PREPROS heeft een gratis versie die wij downloaden en installeren via de link https://prepros.io/downloads
- We dienen er nu voor de zorgen dat het basis CSS bestand die Bootstrap gebruikt, nl. bootstrap.css telkens weer wordt gecompileerd naar bootstrap.min.css aangezien we die gebruiken in ons html bestand. Je selecteer het basisbestand in de css folder van je project, nl. bootstrap.css maar je wijzigt het output path naar css/bootstrap.min.css. Wanneer wij dus in het basisbestand iets zouden wijzigen dat wordt dit “gepreprocessed” naar de minified versie zoals we die hebben voorzien. Vergeet ook niet de autoprefixer, auto compile en minify css aan te vinken indien dit niet het geval zou zijn. De auto compile zorgt ervoor wanneer je iets wijzigt in het basisbestand dat er gepreprocessed wordt. Dit vervangt eigenlijk de “process file” button die je hier ook ziet staan.
- SCSS (=SASSY CSS). We tillen CSS3 naar een niveau hoger. We gaan namelijk in de toekomst dynamisch gebruik maken van CSS3. Een webpagina kent echter geen SCSS maar enkel CSS. Daarom moeten we ervoor zorgen dat al onze SCSS bestanden omgezet worden naar onze bootstrap.min.css.
Vanuit je dist folder die je heb gedownload van de site van bootstrap dien je nu ook de volledige folder scss in je project te kopiëren. - In de scss folder maak je nu een style.scss bestand aan.
- In de scss folder kan je het bestand bootstrap.scss terugvinden. Onderaan deze pagina voeg je dan de import toe van het style.scss bestand.
NA BOVENSTAANDE STAPPEN HEB JE EEN VOLLEDIG WERKENDE TEMPLATE VOOR BOOTSTRAP 4.