Bootstrap- roosters
Bootstrap Grid System
Bootstrap se roosterstelsel laat tot 12 kolomme oor die bladsy toe.
As jy nie al 12 kolomme individueel wil gebruik nie, kan jy die kolomme saam groepeer om groter kolomme te skep:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap se roosterstelsel reageer, en die kolomme sal outomaties herrangskik afhangende van die skermgrootte.
Roosterklasse
Die Bootstrap-roosterstelsel het vier klasse:
xs(vir fone - skerms minder as 768px breed)sm(vir tablette - skerms gelyk aan of groter as 768px breed)md(vir klein skootrekenaars - skerms gelyk aan of groter as 992px breed)lg(vir skootrekenaars en rekenaars - skerms gelyk aan of groter as 1200px breed)
Die klasse hierbo kan gekombineer word om meer dinamiese en buigsame uitlegte te skep.
Basiese struktuur van 'n selflaai-rooster
Die volgende is 'n basiese struktuur van 'n Bootstrap-rooster:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Eerstens; skep 'n ry ( <div
class="row">). Voeg dan die verlangde aantal kolomme by (etikette met toepaslike
.col-*-*klasse). Let daarop dat getalle in .col-*-*altyd 12 vir elke ry moet optel.
Hieronder het ons 'n paar voorbeelde van basiese Bootstrap-roosteruitlegte versamel.
Drie gelyke kolomme
Die volgende voorbeeld wys hoe om 'n drie gelyke breedte kolomme te kry wat begin by tablette en skaal na groot rekenaars. Op selfone of skerms wat minder as 768px wyd is, sal die kolomme outomaties stapel:
Voorbeeld
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Twee ongelyke kolomme
Die volgende voorbeeld wys hoe om twee kolomme met verskillende breedtes te kry wat by tablette begin en na groot rekenaars skaal:
Voorbeeld
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Wenk: Jy sal later in hierdie tutoriaal meer oor Bootstrap-roosters leer.