Ben's Hobbyhoekje -- Werken met Bootstrap

Werken met Bootstrap

Het maken van een responsive site is een hoop werk. Dat komt vooral doordat de noodzakelijke code best wel ingewikkeld is en daarom veel inspanning vraagt op het te maken en te testen. Als je voor elke nieuwe website een nieuw idee uitwerkt om de site responsive te maken, verspil je tijd en energie. Dat moet je niet (willen) doen. Je kunt dan beter een responsive framework inzetten.

In het artikel Over frameworks voor het maken van websites wordt iets gezegd over de manier waarop zo'n framework werkt.
Op deze pagina wordt wat dieper ingegaan op het werken met mijn favoriete framework: Bootstrap, van de makers van de berichtendienst Twitter.

Het onderstaande geldt voor Bootstrap 3.2.0. Op het moment dat dit geschreven wordt is dat de actuele versie.

Voor de goede orde: Dit is géén Handleiding. Dit verhaal beschrijft (summier) de structuur van een met Bootstrap gebouwde site. Meer informatie vind je op getbootstrap.com.

De volgende items worden besproken:
1. De algemene opzet van een Bootstrap-site
2. De opzet van de pagina en het grid
3. Het opmaken van je site
4. Componenten en plugins gebruiken
Het volgende is slechts een summiere opsomming. Waar zaken lijken te ontbreken verwijs ik naar getbootstrap.com/getting-started/, maar begin te lezen vanaf Starter Template.
De algemene opzet van een Bootstrap-site
Helemaal aan het begin zet je een HTML5-doctype.
De <HEAD> heeft het attribuut lang="EN".
In de <HEAD> zet je een <meta>-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dit zorgt ervoor dat de website op elk apparaat correct wordt weergegeven.
Vervolgens link je hier de CSS van Bootstrap. Gebruik hiervoor de geminimaliseerde versie (bootstrap.min.css), dat scheelt tijd voor het laden van je site. Eventueel voeg je hieronder een Bootstrap-theme toe, maar dat is niet noodzakelijk. De inhoud van bootstrap.theme.css overschrijft nl. een aantal standaard-instellingen uit bootstrap.css.
Hieronder link je je eigen CSS-bestand. Daarin kun je alle zaken die in de file bootstrap-theme.css staan, aanpassen aan je eigen voorkeuren.Je kunt hier ook je eigen CSS-klassen toevoegen.
Als je website moet kunnen werken in Internet Explorer 8, voeg je links in naar JavaScripts waarmee HTML5-elementen en CSS-media-queries worden "nagemaakt". Internet Explorer 7 en eerder worden niet ondersteund.
Aan het eind van je HTML-document link je jquery.min.js (Bootstrap werkt daarmee en heeft dat dus nodig) en bootstrap.min.js. Je hoeft geen aparte opdracht te geven om Bootstrap te starten, dat gaat automatisch. Daarna link je eventuele Bootstrap-plugins en plaats je je eigen JavaScript of JavaScript-files.
Het hele verhaal eindigt met het starten van plugins e.d.:
$(document).ready(function() { } (maar alleen als dat nodig is!).
De opzet van de pagina en het grid
Alle content wordt ingepakt (wrapped) in een div-tag: <div id="wrap">. Echt nodig is dit niet, maar gebleken is dat het veiliger is om het wel te doen.
Dit is overigens de enige plaats waar je een id gebruikt in een <div>-tag. Bootstrap werkt verder helemaal met classes.
Je begint met de navigatie. Deze staat gewoonlijk in de <div> met de class navbar. Hieraan zijn nog veel meer klassen gekoppeld, die nodig zijn om het goed te laten werken. Er worden ook zaken ingesteld die pas zichtbaar worden als de breedte van de viewport kleiner wordt dan 768px het scherm of window. De viewport is het hele scherm bij een smartphone of tablet. Het is het binnenafmeting van een window bij een desktop of laptop.

Het voert in het kader van dit artikel te ver om dit allemaal uitgebreid te te behandelen. In de 'Getting Started'-sectie van getbootstrap.com/getting-started/ vind je onder het kopje "Examples" een paar voorbeelden van een navigatie-bar. Kijk vooral eens naar de Fixed navbar.
Binnen <div class="navbar ... ..."> Staat <div class="container">. Deze is nodig om het navigatiegedeelte bij elkaar te houden en mag dus niet worden verwijderd.
Hierna komt het grid zelf, dus de rijen en kolommen.
Om een rij te maken gebruik je de tag <div class="row"> ..... </div>. Binnen die tag plaats je de kolommen. Een kolom maak je met een <div class="col-xx-yy">-tag.
Voor xx kun je de volgende waarden invullen:

xx		*Betekenis*
xs		Extra small, d.w.z. < 768px. Dit zijn kolommen voor kleine tablets en smartphones.
sm		Small, d.w.z. ≥ 768px en < 992px. Dit zijn kolommen voor tablets.
md		Medium devices, d.w.z. ≥ 992px en < 1200px. Dit zijn kolommen voor desktops en laptops.
lg		Large, d.w.z. ≥ 1200px. Dit zijn kolommen voor desktops en laptops met een breedbeeldscherm.

N.B.: In eerste instantie hoef je je er niet echt druk over te maken welke waarde voor xx je moet kiezen voor het maken van de kolommen. Met md heb je al een goed werkende website. Zie bijvoorbeeld www.vasteburcht.nl, die is helemaal opgezet met alleen md. Wanneer de schermbreedte te klein wordt voor md, vervangt Bootstrap dat automatisch door sm of door xs. Daar hoef je zelf dus niets voor te doen. Het is overigens niet zo dat md automatisch wordt vervangen door lg. Meestal wil je dat ook niet. In voorkomende gevallen kun je md-klassen vervangen door lg-klassen.
Voor yy vul je een getal in tussen 1 en 12. Dit is het aantal kolommen van het Bootstrap-grid dat wordt samengenomen in de kolom. col-md-8 bevat dus 8 kolommen van het grid.
Het Bootstrap-grid bestaat uit 12 (twaalf) kolommen. Het is (zeker als je pas met Bootstrap bezig bent) handig om in elke <div class="row"> twaalf kolommen te zetten. Daarmee voorkom je onverwachte zij-effecten als je het window gaat re-sizen.
Een <div class="row"> ziet er bijvoorbeeld zo uit:

<div class="row"> <div class="col-md-2> ... </div> <div class="col-md-6> ... </div> <div class="col-md-4> ... </div> </div>
Zie ook getbootstrap.com/docs/3.4/css/#grid-example-basic. Je vindt daar ook uitleg hoe je de klassen col-xs-, col-sm-, col-md- en col-lg- met elkaar kunt combineren, waardoor de breedte van een kolom per viewport kunt variëren.
Het is mogelijk kolommen te nesten. Dat doe je door binnen een kolom een set van 12 nieuwe kolommen te definiëren. Zie
getbootstrap.com/docs/3.4/css/#grid-nesting.
Je kunt een kolom naar rechts verschuiven over een zeker aantal kolommen (offset). Daarvoor voeg je aan de kolom met klasse col-md-yy een extra klasse toe: col-md-offset-zz. Zorg er wel voor dat de som van de kolom-breedte en kolom-offsets niet groter is dan 12. Zie ook:
getbootstrap.com/docs/3.4/css/#grid-offsetting.
Tenslotte kun je nog een voettekst (footer) in je pagina opnemen. Als je die 'gewoon' onderaan de pagina-tekst wilt zetten, neem je die op in het grid. Je kunt het ook onderaan het window vastzetten. In de 'Getting Started'-sectie van getbootstrap.com/getting-started/ vind je onder het kopje "Examples" een paar voorbeelden van een footer. Kijk vooral eens naar Sticky footer with navbar.
Het opmaken van je site
Je kunt alle zaken die in bootstrap.theme.css voorkomen aan te passen.
Je kunt ervoor kiezen om instellingen in bootstrap.theme.css aan te passen. Het is echter beter om dit bestand niet te wijzigen en alle aanpassingen in je eigen CSS-bestand.
Link bootstrap.theme.ccs ná bootstrap.ccs. Als je dat niet doet worden de instellingen van het theme overschreven door de default-waarden.
Link je eigen CSS-bestand ná bootstrap.ccs en ná bootstrap.theme.ccs. Als je dat niet doet worden je eigen Bootstrap-instellingen overschreven door hun default-waarden.
Wees er op bedacht dat je voor je eigen classes per ongelijk een naam kunt kiezen die ook door Bootstrap wordt gebruikt. Dat zal de werking van Bootstrap verstoren. Je kunt dit eenvoudig voorkomen door de namen van je eigen classes te laten beginnen met my_.
Componenten en plugins gebruiken
Componenten zijn onderdelen die standaard in Bootstrap aanwezig zijn. Denk hierbij aan: Het menu ((Fixed-)navbar), De voettekst ((fixed-)footer), CSS-knoppen (in de themes) en Jumbotron.
Een Jumbotron is een blok over de volle breedte van de container, waarin je speciale dingen kunt zetten, zoals een ticker-tape, een extra grote kop, een foto-caroussel, enz. Zie bijvoorbeeld www.vasteburcht.nl. Het witte blok met het logo en kop 'Welkom' is de Jumbotron. Je kunt de Jumbotron apart van de website opmaken, bijvoorbeeld met afgeronde hoeken.
Een bijzondere component is een verzameling icons, die je vindt op getbootstrap.com/components/.
Plug-ins zijn stukjes code die door derden zijn gemaakt en beschikbaar zijn gesteld. Je vndet er prechtige foto-sliders, menu's (ook menu's die van links inschuiven), enz. Laat Google maar eens zoeken op 'Bootstrap Plugins'. Het aanbod is overweldigend.
Voor zaken als formulieren, lijsten, enz. is het gebruik van een plugin aan te raden. Veel voorkomende problemen met de responsiviteit, zoals formulieren die half buiten de viewport vallen, zijn hierin al opgelost. En waarom zou je het wiel uitvinden als er overal auto's rijden?
Let goed op wat je doet als je een plugin inzet, want soms krijg je neveneffecten. Zo is er een plugin die tekst-schaduwen kan maken, voor Internet Explorer versie 9. Die doet het prima, zolang je jQuery versie 1.8.3 gebruikt. Met recentere versies van jQuery werkt het niet…!
Voorbeeld-code
Het onderstaande voorbeeld toont een deel van de code die hiervoor is besproken.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet">    <link href="css/mijn_eigen_css.css" rel="stylesheet"> </head> <body><div id="wrap">  <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> . . . </div> </div> <div class="row"> <div class="col-md-4"> ..... </div> <div class="col-md-4"> ..... </div> <div class="col-md-4"> ..... </div> </div> <div class="row"> <div class="col-md-6"> ..... </div> <div class="col-md-6"> ..... </div> </div>  <script src="js/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script> <script> // alleen indien nodig $(document).ready(function() {} ); </script> </div>  </body> </html>
Opmerkingen:
Zie het item Over het comprimeren van JavaScript-code voor informatie over geminimaliseerde CSS- en JavaScript-code.
Je kunt bootstrap.min.css, bootstrap.min.js en jquery.min.js ook van een CDN laden. Op getbootstrap.com/getting-started/ staat waar de files te halen zijn. Over CDN lees je meer in het item Content Delivery Network: Wat het is en waarvoor je het gebruikt.