Kop 1

tagline

Bootstrap: snel ontwikkelen met een CSS Library

Hier wordt uitgebreid kennis gemaakt met Bootstrap. Dit doen we op op een manier, die goed bij developers past. Je zult zien dat we al een hele opmaak responsive kunnen realiseren zonder ook maar 1 regel CSS te schrijven.

  • We zien hoe je Bootstrap kunt gebruiken door middel van CDN en in het tweede deel de voordeln van een installatie via npm. Ook al is het werken met CLI voor een beginnende developer wat onwennig.
  • We gebruiken de CLI ook om het werk op GitHub te plaatsen;
  • Bootstrap wordt pas op het eind met Sass aangepast. Maar dan zie je hoe je deze library ook helemaal kunt beheersen.

Leerdoelen

  • kennismaken met Bootstrap:
    • installatie;
    • documentatie;
    • lay-out: opmaken van responsive kolommen;
    • enkele componenten:
      • navigatiebalk;
      • jumbotron;
      • modale vensters;
      • cards
  • voor- en nadelen van Bootstrap kennen;
  • werken met npm;
  • werken met CLI voor projectinstallatie en GitHub;
  • werken met Sass om Bootstrap aan te passen/af te slanken.

Link naar de presentatie

Pagina met Bootstrap 0: het resultaat
(00:02:51)

In deze reeks maken we een pagina met Bootstrap. Als je met deze library werkt kun een pagina een fraaie vormgeving geven zonder zelf te stylen. Je voegt alleen de juiste classes toe, die je in de documentatie van Bootstrap kunt vinden. Je creëert zo een responsive pagina met modaal venster, dropdown menu, ook voor mobiel, cards en er is nog meer mogelijk. Je ziet daarvan een tussen-resultaat. Wil je dit verder naar eigen smaak verder ontwikkelen, dan is het noodzakelijk om ook met Sass aan de slag te gaan.

Opdracht

  1. Download van https://github.com/Theo-denBlanken/LOTR het startdocument of maak een vergelijkbare pagina.
  2. Volg eerst onderstaande instructievideos om het resultaat te krijgen zoals in de video hiernaast.
  3. Voeg daarna een eigen component van Bootstrap toe!
  4. Ga vervolgens Bootstrap aanpassen aan het onderwerp Lord of the Rings.

Pagina met Bootstrap 1: Bootstrap koppelen
(00:04:58)

We beginnen met de eenvoudigste manier om met Bootstrap aan de slag te gaan.
Er wordt een CDN gebruikt. Met een link naar een online CSS-bestand heb je al de nodige CSS tot je beschikking.
Je ziet ook direct het effect: de tekst is nu schreefloos.
De CDN `s zijn te vinden op https://getbootstrap.com/docs/4.5/getting-started/download/

Pagina met Bootstrap 2: Bootstrap responsive grid
(00:07:55)

Alle lay-out met Bootstrap begint met de content in een element (vaak een div) te plaatsen. Bootstrap noemt dit de container-div en hij krijgt dan ook de class container of de class .container-fluid mee. Het element krijgt daarmee wat padding.
Wil je kolommen naast elkaar zetten, dan omvat je ze eerst met een div met de class .row.
Vervolgens geef je de elementen zelf de class .col.
Bootstrap heeft een 12-koloms grid. Het is daarmee goed deelbaar door 2, 3 en 4. Je vertelt van elke kolom hoeveel delen van die 12 hij gaat omspannen. Dus als er 2 kolommen naast elkaar moeten, geef je ze allebei de class .col-6.
In onze pagina willen we bij kleine viewports 2 kolommen en met grote viewports 4 kolommen.
We gaan de class van de kolommen dus extra informatie geven. Voor kleine viewports wordt .col-6 uitgebreid naar .col-sm-6. Daarmee geldt de dit dus voor kleine viewports.
Door de class uit te breiden naar col-sm-6 col-md-3 voeg je dus en breakpoint toe voor gemiddelde viewports waarbij er dan 4 kolommen naast elkaar kunnen.
Documentatie: https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match.

Na deze classes te hebben toegevoegd zien we nog niet direct mooie kolommen.
Het blijkt dat de afbeeldingen zich niet aanpassen. Om ze dat wel te laten doen, hebben ze ook een class nodig: img-fluid.

Pagina met Bootstrap 3: padding en centreren
(00:05:24))

Om wat meer ruimte tussen de inhoud van de kolommen te maken geven we met de class .p-4 extra padding aan de sections.
Voor meer afstand tot de rand van de vierport geef je extra padding aan de container.

Centreren gaat ook met een class: .text-center.

Pagina met Bootstrap 4: een jumbotron
(00:04:17)

Om de header meer te benadrukken, geven hem de class .jumbotron mee.
Deze is weer eenvoudig te vinden in de documentatie van Bootstrap.
Documentatie: https://getbootstrap.com/docs/4.3/components/jumbotron/
Met de .display-4 class kan een kop 1 nog groter en lichter worden (zie: https://getbootstrap.com/docs/4.3/content/typography/).
De eerste paragraaf wordt iets groter met de class lead.
Met padding in de elementen van de jumbotron worden deze uitgelijnd met de kolommen.

Pagina met Bootstrap 5: de navigatiebalk
(00:10:42)

Een andere component van Bootstrap is de navbar: de navigatiebalk. Documentatie: https://https://getbootstrap.com/docs/4.5/components/navbar/
Deze bestaat uit een dusdanig aantal elementen met classes, dat het praktischer is deze in zijn geheel te kopiëren en de links daarin te vervangen door je eigen linkjes.
Een deel daarvan zijn interne links naar delen van de pagina.
Daarvoor heb je dan wel en compleet responsive menu met submenu en zoekvenster.

Voor het submenu en de menu-toggle is JavaScript nodig. Dit zit in de library van Bootstrap: je schrijft het dus niet zelf. Het script is echter afhankelijk van jQuery. Let er dus op de beide koppelingen in de juiste volgorde voor het sluiten van de body zijn toegevoegd.

Pagina met Bootstrap 6: kleuren
(00:03:20)

Ook voor het kiezen van kleuren gebruik je binnen Bootstrap class-namen.
De meest kenmerkende kleur wordt de primaire kleur genoemd en de class-naam krijgt dan ook de naam primary. Dit is een blauwe kleur. Wil je dat aanpassen, ga dan door tot het eind van deze tutorialreeks, waar dat wordt voorgedaan.
In deze video passen we de kleuren van de navigatiebalk en de knoppen aan.
Documentatie: https://getbootstrap.com/docs/4.5/utilities/colors/
Voorbeelden:
Om een navigatiebalk de primaire achtergrondkleur te geven krijgt deze de class .bg-primary mee. De tekst is dan niet leesbaar meer, maar door de class .navbar-light om te zetten naar .navbar-dark wordt de tekst licht en daarmee leesbaar.
Een knop geef je de class .btn-primary waardoor hij de primaire kleur krijgt.

Pagina met Bootstrap 7: 3 kolommen
(00:05:27)

Hier maken we voor de 3 secties met de verhalen over Lord of the Rings drie kolommen. Dit doen we vergelijkbaar met de vier kolommen. Alles komt binnen de .container-fluid en daarbinnen weer een div met de class .row.
Vervolgens krijgt elke sectie de class .col-md-4. Daarmee krijgt elke sectie dus een derde deel van de vierport toegewezen.
Voor smallere viewports komen de eerste 2 secties naast elkaar door de extra class .col-sm-6.
De derde sectie moet daaronder de hele breedte krijgen en krijgt daarom de class .col-sm-12.
De afbeeldingen geven we nu nog geen class mee, omdat deze in card-componenten geplaatst gaan worden.

Pagina met Bootstrap 8: card-component
(00:07:59)

De de inhoud binnen de sections wordt in een card-component gevoegd.
Daarvoor kijken we in de documentatie: https://getbootstrap.com/docs/4.5/components/card/
Het element krijgt de class .card.
De afbeelding daarin de class .card-img-top
en de tekst gaat in een div met de class .card-body.
Voor de kop van die tekst heeft Bootstrap de class .card-title gemaakt.

Pagina met Bootstrap 9: footer stijlen
(00:04:38)

We geven de footer met de class .bg-primary de hoofdkleur als achtergrond.
Zowel de tekst als de linkjes krijgen met de class .text-white een witte kleur voor de leesbaarheid.
De footer krijgt ook de class .container-fluid en de inhoud wordt weer met een class .row, zodat de copy-rights en de validatie knoppen in 2 kolommen kunnen worden geplaatst.
Geef de verschillende elementen een padding of met .pl-4 een padding-left, zodat de inhoud in lijn komt met de cards daarboven.

Pagina met Bootstrap 10: een modaal venster met Bootstrap
(00:15:13)

Voor een modal heeft Bootstrap een component, die weer gebruik maakt van het meegeleverde JavaScript. Voor het gemak is in de code editor de inhoud voor de modaal ingevouwen.

De documentatie voor het model vind je bij: https://getbootstrap.com/docs/4.5/components/modal/
Omdat er weer flink wat attributen zijn, kopieer ik de voorbeeld-code en plak die in de secties. Dan volgt een stukje werk dat nauwkeurigheid vergt.
De inhoud van het model wordt in de div met de class .modal-body geplaatst.
Daarbij wordt de kop verplaatst naar de div met de class .modal-header.

In de voorbeeldcode is ook de knop, die de model oproept meegekopieerd. Deze knop wordt verplaatst binnen de card. En natuurlijk krijgt hij passende inhoud. Je kunt de model nu al testen, en dat moet je zeker ook doen. Want het is nog niet niet klaar, maar je kunt fouten nu nog makkelijker terugnemen.
Het blijkt dat er in de gekopieerde 2 ID's zitten en twee andere attributen, die daarnaar verwijzen. Omdat we nog 2 modale maken, moeten we ervoor zorgen dat die ID's uniek zijn. We geven ze dus namen, die bij de model passen.
Je treft een id aan in de div met de class .modal.fade en die is gekoppeld aan het data-target van de knop.
Er is ook een andere ID in de .modal-title en deze is gekoppeld aan het attribuut aria-labelledby van het model. Stem deze dus met de nieuwe namen op elkaar af en test opnieuw.
Deze operatie wordt dus ook voor de beide andere secties uitgevoerd.

Pagina met Bootstrap 11: pushen op GitHub met de Terminal
(00:12:52)

We hebben hier een tussentijds resultaat kunnen bereiken met gebruikmaking van de CDN.
Omdat we deze nu willen bewerken gaan we een heel andere aanpak gebruiken.
Daarvoor slaan we deze pagina onder een andere naam op en zorgen ervoor dat beide pagina's aan elkaar gekoppeld zijn via de home-knop en de branding-knop.
We passen eerst het README.md document aan.
Vervolgens starten we in de terminal een repositry met git init
We plaatsen alle bestanden op de stage met git add -A
We maken een commit met git commit -m "de opmerking over de commit"
Voor een push op GitHub maak je daar een repositry aan. Je ziet daar een gebruiksaanwijzing voor deze terminal instructies en we hebben daar de git-remote opdracht voor nodig. Dit lijkt op iets als:
git remote add origin https://github.com/Theo-denBlanken/demoLOTR.git
Het laatste deel is het adres van jouw git-repositry.
Tot slot voor je de push opdracht in:
git push -u origin master
Soms moet je je wachtwoord invoeren maar dan staat alles online.
Dit lijkt heel veel werk, maar de volgend commits kunnen met de pijltjestoets omhoog snel worden opgeroepen.
Voer vanaf nu geregeld push-opdrachten uit!

Pagina met Bootstrap 12: npm package maken
(00:10:28

Om eigen css te kunnen genereren maken we met npm een package van ons project.
Eerst de initialisatie via Terminal: npm init
npm stel verschillende vragen. Soms wordt een antwoord voorgesteld, die met Enter of met y kunt bevestigen. Andere vragen vul je in.
Na dit proces is er een package.json aangemaakt en een package-lock.json.
Deze bevatten de gebruikte modules in jouw pakket.
De node_modules zitten dan in een aparte map. Deze kan heel erg groot worden.
Deze worden dan ook nooit bewerkt (jij en jouw team-genoten zouden daar volledig in verdwalen), ook niet gepubliceerd (veel te grote hoeveelheid data) en om diezelfde reden (en ook veel te veel losse bestanden, vooral bij dependensies) ook nooit naar GitHub gepusht.
Maak daarom altijd een .gitignore bestand aan, die tenminste deze map node_modules bevat!
Daarna committen we onze repositry weer naar GitHub.

Pagina met Bootstrap 13: eigen CSS compileren
(00:05:45)

Ons document heeft nog geen CSS. Deze gaan we met Sass compileren.
We maken daarom eerst een css-bestand en koppelen deze aan het document. Daarna een eigen main.css bestand.
In deze main.scss kun je dan allerlei .scss-bestanden importeren vanuit de node_modules-map.
Documentatie: https://getbootstrap.com/docs/4.5/getting-started/theming/ De structuur ziet er als volgt uit: 

        lotr/
        ├── scss
        │   └── main.scss
        └── node_modules/
            └── bootstrap
                ├── js
                └── scss ......
Bootstrap stelt voor de volgende delen te importeren: 
        
        // Vereist
        @import "../node_modules/bootstrap/scss/functions";
        @import "../node_modules/bootstrap/scss/variables";
        @import "../node_modules/bootstrap/scss/mixins";
        
        // voorgesteld
        @import "../node_modules/bootstrap/scss/reboot";
        @import "../node_modules/bootstrap/scss/type";
        @import "../node_modules/bootstrap/scss/images";
        @import "../node_modules/bootstrap/scss/code";
        @import "../node_modules/bootstrap/scss/grid";
Hierna kun je met een nieuwe Terminal Sass laten compileren: 
        sass --watch bron.scss doel.css
Er is weer te zien dat Bootstrap gekoppeld is aan jouw document, al moet er nog meer geïmporteerd worden om alle gemaakte classes te laten werken.

Pagina met Bootstrap 14: de nodige scss-bestanden importeren
(00:12:20)

Het gecompileerde css-bestand ondersteunt te weinig classes uit ons document.
door vanuit de node_modules aanvullende scss-bestanden te importeren, wordt na compilatie de css steeds verder uitgebreid. We importeren:

  • navbar
  • utilities/background
  • jumbotron
  • dropdown (deze werkt als ook het JavaScript werkt en daarom worden die CDN's even teruggeplaatst)
  • utilities/text
  • modal
  • utilities/spacing
  • card
  • buttons
  • transitions
  • mixins/screenreader
  • mixins/hover en in een volgend filmpje nog
  • utilities/screenreaders.

Als alles er staat blijkt de gecompileerde css veel kleiner te zijn dat de oorspronkelijke css van Bootstrap. Het is zelfs kleiner dan de Minnies versie daarvan.
We boeken met deze afslanking dus ook een flinke snelheidswinst.

Pagina met Bootstrap 15: meer import en committen
(00:03:26)

Er blijkt dan toch nog niet alles te zijn geïmporteerd. De informatie, die allee voor screenreaders is bedoeld, wordt in onze vierport nog niet verborgen. Na deze aanvulling is de pagina gelijk aan het uitgangspunt met de CDN's.
We maken daarom maar een commit van ons projectje op GitHub.

Pagina met Bootstrap 16: eigen fontkeuze
(00:08:01)

Om een eigen vormgeving binnen Bootstrap te krijgen, importeren we eigen fonts van Google-fonts.
Deze import en toewijzing aan de body en koppen gebeurt in de main.scss. Daar werken we op de gebruikelijke manier zoals we met Google-fonts gewend zijn.

Pagina met Bootstrap 17: eigen kleurkeuze
(00:08:21)

Nu je je eigen Bootstrap hebt, kun je ook de variabelen voor de kleuren aanpassen.
Bootstrap maakt gebruik van de !default eigenschap van Sass. Dit betekent dat als er nog geen waarde aan een eigenschap is toegekend, deze de default-waarde krijgt.
Voorbeeld: $primary: #123456; !default
Wil je echter dat de primaire kleur groen is, dan wijzig je dus niet de bovenstaande regel. Immers: deze staat in de node_modules-map en daarin wijzig je niets.
Je zet hem in een eigen SCSS-bestand- of document, die gecompileerd wordt voordat de bestanden in de node_modules gecompileerd worden. Daarmee zorg je er dus voor dat de $primary groen is gezet en Sass zal dan de default-instelling overslaan.
We beginnen met de hoofdkleur $primary. Door deze aan te passen worden zowel, de navbar, de footer als de kleur van de koppen aangepast.

Pagina met Bootstrap 18: achtergrondafbeeldingen
(00:07:42)

Achtergrond afbeeldingen kunnen de sfeer sterk beïnvloeden. De jumbotron krijgt een achtergrondafbeelding, die niet al teveel contrast heeft op plaatsen waar de tekst moet komen.
Voor verschillende viewports worden er verschillende achtergronden geplaatst door het gebruik van mediaqueries.
De tekst kleur moet nu ook aangepast voor de leesbaarheid.
Dit doen we op een Bootstrap-vertrouwde manier, door die text met aan class .text-warning een gele kleur te geven.

Pagina met Bootstrap 19: scripts installeren
(00:20:02)

Om de knoppen op dezelfde hoogte te plaatsen, willen we een scriptje gebruiken dat de verschillende teksten daarboven gelijk in hoogte maakt.
Op https://github.com/liabru/jquery-match-height is jquery.matchHeight.js te vinden.
Deze jQuery plugin heeft geen CDN maar met npm install jquery-match-height kunnen we hem wel installeren.
Voor onze pagina mogen we echter geen koppelingen maken vanuit de node_modules, omdat die niet worden gehost (en ook niet op GitHub worden geplaatst).
We gaan de benodigde JS-bestanden in een eigen mapje kopiëren en dan kunnen ook de nog bestaande CDN's vervangen door linkjes binnen onze repo.
Hidde heeft daarvoor een Node-scriptje ontwikkeld: https://github.com/hiddebraun-ma/node-copyfiles.
We maken daarom eerst een json-bestand, met in array-items het pad naar een JS-bestand in de node_modules bevat en het pad naar ons eigen gemaakte JS-mapje.
Het scriptje zelf: 

  const fs = require("fs");   // laad 'filesystem' class
  let files = require('./required_files.json');  // laad het gemaakte json/bestand
  
  // een functie die bij foutmelding de error weergeeft
  let copyCallback = function (err) {    
    if (err) {
      console.error(err.message);
    }
  };
  
  // loop door de json en log wat je kopieert en kopieer het item
  files.forEach((fileInfo) => {
    console.log(`Copying ${fileInfo.source} to ${fileInfo.destination}`);
    fs.copyFile(fileInfo.source, fileInfo.destination, copyCallback);
  });

Om het scriptje te kunnen runnen moet je hem eerst toevoegen aan package.json.
Er is daar al een script voor tests en daar voeg je dit script aan toe.
Het bevat een naam en de waarde is node gevolgd door het pad naar de plaats van het script.
Je kunt het script nu aanroepen met
npm run naam-van-scriptje en als jet goed gegaan is, zul je de gekopieerde bestanden zien verschijnen.

Pagina met Bootstrap 20: gelijke hoogten
(00:08:59)

De CDN's worden vervangen door koppelingen naar scripts in onze eigen repositry.
Hierbij is de volgorde van belang: als een script afhankelijk is van andere scripts, moeten deze als eerste worden geladen. Daarom moet eerst jQuery en popper.js gekoppeld worden.
Nu kunnen we ook de ongelijke tekstinhouden even hoog maken.
Met een jQuery-selectie $('.class-naam').matchHeight(), selecteren we de elementen die een gelijke hoogte moeten krijgen, en geven die dan allemaal de hoogte van het hoogste element.
Voor de inhoud van de cards moeten we nog een element toevoegen om die dan de gelijke hoogten te geven, zodat de knoppen daaronder verticaal uitgelijnd komen.

Nu de reeks voltooid is, maak je nog een commit op GitHub, plaats je het resultaat online en zet je een link naar de live versie in README.md

De instructies van een eerdere versie van deze tutorialreeks

Opdracht

  1. Download van https://github.com/Theo-denBlanken/LOTR het startdocument of maak een vergelijkbare pagina.
  2. Volg eerst onderstaande instructievideos om het resultaat te krijgen zoals in de video hiernaast.
  3. Voeg daarna een eigen component van Bootstrap toe!
  4. Ga vervolgens Bootstrap aanpassen aan het onderwerp Lord of the Rings.

Site met Bootstrap 1: Bootstrap koppelen aan het document (00:09:31)

Uitgaande van een document op https://github.com/Theo-denBlanken/LOTR gaan we Bootstrap installeren. Als Node.js is geïnstalleerd kan dat via npm. (Anders zijn er nog verschillende andere manieren zoals rechtstreekse downloads en CDN.) Voor npm starten we de Terminal (windows: command prompt) en navigeren met cd naar de projectmap.
Met npm init initialiseren we node package manager. Daarvoor worden er een aantal vragen beantwoord. Als we ook een repository van ons project op GitHub willen, kunnen we de url daarvan ook opgeven. Mocht je hier een fout maken, dan kun je hem in de editor nog herstellen.
Hierna geven we met npm install bootstrap voor de Bootstrap installatie. Hierna blijkt een map node_modules te zijn aangemaakt alsook package-lock.json en is package.json te zijn aangevuld met de bootstrap dependency.

We kunnen bootstrap.css of een minified versie daarvan koppelen aan ons document een test van het document laat zien dat er een ander font is, en de knoppen en input hebben al een andere vorm.

Site met Bootstrap 2: responsive grid van Bootstrap (00:10:11)

Alle lay-out met Bootstrap begint met de content in een element (vaak een div) te plaatsen. Bootstrap noemt dit de container-div en hij krijgt dan ook de class container of de class container-fluid mee. Het element krijgt daarmee wat padding.
Wil je kolommen naast elkaar zetten, dan omvat je ze eerst met een div met de class row.
Vervolgens geef je de elementen zelf de class col.
Bootstrap heeft een 12-koloms grid. Het is daarmee goed deelbaar door 2, 3 en 4. Je vertelt van elke kolom hoeveel delen van die 12 hij gaat omspannen. Dus als er 2 kolommen naast elkaar moeten, geef je ze allebei de class col-6.
In onze pagina willen we bij kleine viewports 2 kolommen en met grote viewports 4 kolommen.
We gaan de class van de kolommen dus extra informatie geven. Voor kleine viewports wordt col-6 uitgebreid naar col-sm-6. Daarmee geldt de dit dus voor kleine viewports.
Door de class uit te breiden naar col-sm-6 col-md-3 voeg je dus en breakpoint toe voor gemiddelde viewports waarbij er dan 4 kolommen naast elkaar kunnen.
Documentatie: https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match.

Site met Bootstrap 3: padding in Bootstrap (00:02:41)

Om wat meer ruimte tussen de inhoud van de sections te maken geven we met de class p-4 extra padding aan die sections.
Om aan de randen ook diezelfde ruimte te hebben, geven we het row-element ook die padding.

Site met Bootstrap 5: navigatiebalk (00:11:54)

Een andere component van Bootstrap is de navbar: de navigatiebalk. Documentatie: https://getbootstrap.com/docs/4.3/components/navbar/

Deze bestaat uit een dusdanig aantal elementen met classes, dat het praktischer is deze in zijn geheel te kopiëren en de links daarin te vervangen door je eigen linkjes.
Een deel daarvan zijn interne links naar delen van de pagina.
Met enkele classes kan het ook een andere kleurschema krijgen: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes.
Voor de dropdown en de menu-toggle is JavaScript nodig. Deze wordt gekoppeld vanuit de node_modules-map.
Het script blijkt echter afhankelijk van jQuery. Via npm install jquery wordt deze gedownload, en moet het worden gekoppeld vóór het script van Bootstrap.

Site (met Bootstrap): Git met CLI (00:10:15)

Nu we toch met de commandline werken, kunnen we met de instructies op GitHub ons werk in een repository plaatsen en updaten.

We kunnen lokaal ons README.md maken en ook een .gitignore-bestand.
Dit laatste bestand geeft de bestanden aan, die niet meegenomen moeten worden als we alles online plaatsen. Normaliter hoort daar de node_modules map bij, maar dan moeten de JavaScript bestanden ook naar 1 bestand gecompileerd worden en dat gebeurt in deze training nog niet. In onze .gitignore komt een verborgen bestand te staan die gemaakt en gebruikt wordt door de Finder van MacOS: .DS_Store

Windows- gebruikers zouden de eerste 5 regels kunnen nemen die staat op: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore

Git zou op je systeem geïnstalleerd moeten staan, controleer met git --version of dit het geval is, anders naar https://git-scm.com/downloads Na deze voorbereidingen git initialiseren met git init. Dit staat ook op de instructie van jouw repo.
Er is een verborgen map .git gemaakt en deze zal niet meegenomen worden naar GitHub.
De README.md hoeft niet aangemaakt, met de editor kun je hem wellicht aanpassen.
Voor beginners is het niet handig dit met CLI te doen.
Vervolgens de mee te nemen bestanden voor de commit op de stage plaatsen.
Dit kan met git add -A. Alle bestanden die niet in de .gitignore en .git staan, worden toegevoegd.
Met git status, kun je nog zien welke dat zijn.
De commit is een punt die in het versiebeheersysteem van Git een punt markeert met de toestand van de bestanden. Je geeft er dus een opmerking bij:
git commit -m "de opmerking" Met git remote maak je Git duidelijk dat je jouw lokale repository verbind met die van bijvoorbeeld GitHub:
git remote add origin https://github.com/Theo-denBlanken/demoLOTR.git
Soms moet hier natuurlijk ook het wachtwoord worden toegevoegd.
Hierna kan de commit worden gepusht: git push -u origin master. Mijn systeem vraagt mijn beheerderswachtwoord van mijn Mac nog bij. Dit is voor de eerste keer een flinke klus geweest, maar de volgende wijzigingen gaan dan een stuk eenvoudiger.

In dit voorbeeld wijzigen we README.md en voegen .gitignore toe. (in deze video wordt deze pas na de eerste commit gemaakt.)
Nu is alleen git add -A nodig: deze zet alleen de gewijzigde bestanden op de stage.
Daarna git commit -m "vermeld wat gewijzigd is" en
git push -u origin master.
Met de pijltjes toets 'naar boven' zijn deze opdrachten dan vliegensvlug te geven.

Site met Bootstrap 6: een modaal in Bootstrap (00:15:27)

Bootstrap heeft ook een modaalcomponent.
De instructie op
https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content laat weer veel mark-up zien. Als je die kopieert en invoegt, kun je de inhoud in de div met de class modal-body plaatsen. De titel in het h5 element aanpassen evenals de inhoud van de knoppen.
Dat zou bij 1 modaal op de pagina volstaan, maar bij meerdere modalen ontstaan er zo ook meerdere id's. Deze moet je dus toesnijden op de inhoud en de verwijzingen van de knop naar de inhoud moet ook worden aangepast.

Valideer je mark-up. Op deze manier is naar boven gekomen dat de titel van het modaal ook een id heeft, die per modaal ook echt uniek gemaakt dient te worden.

Site met Bootstrap 7: drie secties naast elkaar (00:04:29)

Een herhaling van een eerdere handeling: er is een omvattend element met de class container-fluid nodig en daarin een div met de class row. De afbeeldingen moeten kleiner blijven dan de breedte van de kolommen en dat kan met de class img-fluid. De sections daarbinnen krijgen een class col-md-6 col-md-4 zodat ze bij kleine viewports met zijn tweeën naast elkaar staan en bij bredere viewports met zijn drieën.

Naar keuze kan de derde section een class col col-md-4, zodat hij bij de kleine viewport niet smal wordt en een lege ruimte naast zich laat, maar als enige de hele breedte neemt.

Site met Bootstrap 8: footer stijlen (00:06:05)

We geven de footer hier een achtergrondkleur en gaan de inhoud in lijn met de rest van de pagina brengen.
De we zorgen dat er weer 2 elementen zijn met de class container-fluid en row in elkaar zitten met elk een p-4 class.
De achtergrond kan met bg-primary. Dit geven we de nav-bar ook. Ook als zijn deze kleuren nog niet optimaal, verderop gaan we die kleur naar onze smaak omzetten.
De kleur van de tekst gaat met text-white, en voor linkjes moet je dat apart als class aan de link meegeven.
Rechts uitlijnen gaat met text-right.

Site met Bootstrap 9: knoppen op dezelfde hoogte (00:09:47)

Als je de knoppen, die onderaan in de kolommen staan, op dezelfde hoogte willen hebben, merken we het gemis van CSS Grid of Flexbox.
Het wordt hier daarom met een JavaScript opgelost met matchHeight.js:
http://brm.io/jquery-match-height/ en
https://github.com/liabru/jquery-match-height
Met npm install jquery-match-height wordt de jQuery-plugin geïnstalleerd.
Koppel het script na de koppeling van jQuery.

Daarna kan een eigen scriptje de betrokken elementen selecteren en gelijk maken aan de langste uit de selectie: $('#inleiding p').matchHeight(); selecteert alle paragrafen in de div met de id inleiding en maakt ze even hoog.
Als er meerdere paragrafen in een kolom voorkomen, moeten ze in een gemeenschappelijke parent gestopt worden, die dan geselecteerd kan worden.
Voor de eenheid de overige knoppen allemaal ook de class btn btn-primary meegeven.

Site met Bootstrap 10: GitHub bijwerken (00:02:28)

Het is weer een mooi moment om GitHub bij te werken.
Merk op dat we tot nu toe niet 1 regel CSS geschreven hebben!!
De volgende 3 opdrachten volstaan: 

  git add -A
  git commit -m "gelijke hoogten gemaakt"
  git push -u origin master
Met de pijltjes-omhoog toets zijn ze praktisch op te roepen.
In de video laat ik ook git status zien om te laten zien wat er gebeurd. Je hoeft de GitHub site niet eens te openen, we doen het hier ter demonstratie van het wonder.

Site met Bootstrap 11: Card component (00:06:15)

Een van de kolommen kan een card-component worden.
Voor de semantiek wordt de huidige section een div en wordt de zichtbare inhoud (exclusief de modaal omdat dit makkelijker werken is) de section. Deze krijgt de class card mee.
Als de kop de class card-header krijgt, de afbeelding de class card-img-top, de inhoud de class card-body en de div om de button de class card-footer. Dan heb je een mooie card gerealiseerd. Geef de footer dan ook nog de class text-center om de knop gecentreerd te krijgen.

Site met Bootstrap 12: Eigen css genereren (00:16:55)

Er wordt nu nog gebruik gemaakt van de css van bootstrap.css, die meer dan 10.000 regels telt.
We gaan onze eigen css genereren en maken daarvoor een eigen scss-bestand en een eigen css-bestand.
Het scss-bestand importeert de noodzakelijke scss-bestanden uit de node_modules.
Er wordt dus NIET in de node_modules-map gewerkt!
De documentatie van Bootstrap vertelt welke scss-bestanden vereist zijn, voordat je zelf de noodzakelijke eruit pikt:
https://getbootstrap.com/docs/4.3/getting-started/theming/ Vereist: functions, variables, mixins.
Je begint al resultaat te krijgen na reboot, type, images en grid.
Voor de hele LOTR hebben we nodig: dropdown, transitions, navbar, buttons, jumbotorn, class, modal en card en de volgende utilities: text, spacing, background en screenreaders.

Deze exercitie levert een eigen CSS-bestand op van een kleine 5,5-duizend regels. Bijna een halvering van bootstrap.css!!

Site met Bootstrap 13: Bootstrap aanpassen (00:16:55)

Nu je je eigen Bootstrap hebt, kun je ook de variabelen aanpassen.
Bootstrap maakt gebruik van de !default eigenschap van Sass. Dit betekent dat als er nog geen waarde aan een eigenschap is toegekend, deze de default-waarde krijgt.
Voorbeeld: $primaire-kleur: #123456; !default
Wil je echter dat de primaire kleur rood is, dan wijzig je dus niet de bovenstaande regel. Immers: deze staat in de node_modules-map en daarin wijzig je niets.
Je zet hem in een eigen SCSS-bestand- of document, die gecompileerd wordt voordat de bestanden in de node_modules gecompileerd worden. Daarmee zorg je er dus voor dat de $primaire-kleur rood is gezet en Sass zal dan de default-instelling overslaan.

Daaronder kun je natuurlijk fonts importeren, achtergrondafbeeldingen instellen en zo meer. Je maakt zo je eigen Bootstrap-versie!
Moet er een tekstkleur worden aangepast, probeer dan dat eerst via classes in je markup te doen.

Bonusopdracht

Je kunt op 3 manieren de bonus bemachtigen:
  1. Maak de opdracht met een andere CSS library zoals Foundation;
  2. Programmeer je eigen JS scriptje, die de kolommen even hoog maakt.
  3. Voeg zelf een Bootstrap component op zinvolle wijze toe.

Inleveren

  • Na afloop plaats je deze training online in je bewijzenmap;
  • Valideer jouw pagina's op Markup Validation Service van W3C.
  • De validatie icoontjes plaats je in de footer.
    Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
  • Plaats jouw code op in een aparte repository op GitHub en plaats jouw uitwerking online;
  • Maak in jouw GitHub-repo een README.md met daarin tenminste een link naar jouw online uitwerking.
  • Plaats de GitHub-link in ELO Magister bij de FRO md1 Kennismaken Bootstrap.