Bootstrap 4

1. Kennismaken met Bootstrap 1
Wat is Bootstrap? 2
Kenmerken van Bootstrap 5
Wat kunt u maken met Bootstrap? 10
Benodigde voorkennis 12
De ontwikkelomgeving inrichten 15
Oefenbestanden downloaden 18
Samenvatting 19

2. Uw eerste Bootstrap-site 21
Bootstrap downloaden en invoegen in de pagina 22
Een nieuwe site maken 24
Stap 1 – de pagina beginnen 28
Stap 2 – rijen en kolommen toevoegen 31
Nieuw in Bootstrap 4: automatische kolommen 31
Stap 3 – header toevoegen 36
Stap 4 – Jumbotron toevoegen 38
Stap 5 – de kolommen vullen 40
Stap 6 – de footer instellen 44
Samenvatting 46
Praktijkoefeningen 46

3. Lay-outs maken met het gridsysteem 49
Hoe het gridsysteem werkt 50
Verschil met het vorige hoofdstuk 52
Regels voor het gridsysteem 53
Voorbeeld 1 – horizontale lay-out, gestapeld op mobiele apparaten 59
Voorbeeld 2 – lay-out voor mobiel en desktop 63
Voorbeeld 3 – offset voor kolommen 67
Voorbeeld 4 – kolommen nesten 68
Verticaal uitlijnen 72
Samenvatting 73
Praktijkoefeningen 75

4. Inhoud vormgeven: teksten, tabellen, knoppen en afbeeldingen 81
Wat Reboot is en welke invloed het heeft 82
Typografie – kopteksten, lead en overige 86
Afbeeldingen vormgeven 90
Tabellen opmaken 92
Knoppen 98
Voorbeeld – elementen combineren 105
Samenvatting 107
Praktijkoefeningen 108

5. Formulieren vormgeven 111
Basisopmaak van formuliervelden 112
Inline formulieren 115
Hulpklassen voor witruimte – spacing utilities 118
Formulieren in een grid 121
Read-only en disabled state 123
Klassen voor formuliervalidatie 126
Samenvatting 135
Praktijkoefeningen 136

6. Componenten gebruiken 139
Wat componenten zijn 140
Badge 145
Jumbotron 147
Meer aanpassingen? Bouw een eigen thema 152
Alert 152
List group 154
Card 159
Navigatiemenu met Navs 170
Dropdown 177
Overige componenten 179
Samenvatting 180
Praktijkoefeningen 181

7. Componenten met JavaScript-uitbreidingen 185
Modale dialoogvensters maken met Modal 186
Gebeurtenissen verwerken 193
Navigatiebalk maken met Navbar 195
De component Collapse 202
Foto’s in een carrousel tonen 208
Zelf componenten ontdekken 217
Meer pictogrammen–
Font Awesome als aanvulling op Bootstrap 221
Samenvatting 226
Praktijkoefeningen 227

Index 231