Met bootstrap kan je pagina's maken die zowel op je mega grote pc scherm als op je oude smartphone gezien kunnen worden.
Voor de opmaak van je website kan je bootstrap best bezien als een tabel met 12 kolommen en zoveel rijen als je nodig hebt.
Het is uiteraard geen tabel maar het bestaat uit geneste div's. Zie de uitleg hieronder
Dit gaat enkel over de inhoud, het logo (header) een (footer), en nog een reeks andere class('es) die standaard steeds over de volle breedte van het scherm zijn.
LET OP: De uitleg is die voor bootstrap versie 4.0.0.
Daar deze versie volledig herschreven is, zijn er verschillende zaken die anders werken dan onder bootstrap 3.x.x
Daar op dit ogenblik bootstrap 4 zich nog in versie 4.0.0 beta 2 bevind zijn er nog zeer weinig templates te vinden.
De templates gemaakt in versie 3.x.x zal je dus moeten aanpassen.
De veranderingen die je met deze voorbeelden tegenkomt zal ik van zeggen hoe ze in 3.3.7 waren en hoe in 4.0.0.
Als je de link's voor bootstrap 4.0.0 beta2 gebruikt moet je er wel aan denken dat dit binnen kort??? veranderd naar V 4.0.0 beta3 enz tot aan de eindelijke release.
Onderweg moet je dus steeds de link aanpassen en met wat tegenslag ook het juiste gebruik van sommige tags. Dat laatste gebeurd in principe niet meer, maar je weet nooit.
Voor de links zie onder basis benodigdheden.
<div class="container">
<div class="row">
<div class="col-sm-5">Kolom 1</div>
<div class="col-sm-7">Kolom 2</div>
</div>
<div class="row">
<div class="col-sm-3">Kolom 1</div>
<div class="col-sm-5">Kolom 2</div>
<div class="col-sm-4">Kolom 3</div>
</div>
</div>
Deze div met als class container kan je bezien als <table>
Deze div met als class row kan je bezien als <tr>
Deze 2 div's met als class col-sm-getal zijn je cellen zoals bij <td>
hier col-sm-5 en col-sm-7 samen dus 12 (verplicht)
Afsluiting van je eerste rij
een tweede rij <tr>
Dit is hetzelfde als vorige maar de rij bestaat nu uit 3 kolommen.
Ook hier is col-sm-3 + col-sm-5 + col-sm-4 weer = 12
Of ook weer alle mogelijke kolommen gebruikt.
Afsluiting van je tweede rij
Afsluitng van je container
De lijnen met col-sm-3, 4, 5, 7 kan je bezien als colspan="3" of colspan="4" enz.....
Of bij een tabel, in je wysiwyg editor een aantal cellen selcteren en dan ergens kiezen voor cellen samenvoegen.
Hopelijk zie je die achterliggende structuur zo wat duidelijker
Het basis gebruik van container, row en col zijn zoals ik ze in de uitleg gebruik identiek in versie 3 en 4