Bootstrap Grid - Gestapel-tot-horisontaal
Bootstrap Grid Voorbeeld: Gestapel-tot-horisontaal
Ons sal 'n basiese roosterstelsel skep wat begin gestapel op ekstra klein toestelle, voordat dit horisontaal word op groter toestelle.
Die volgende voorbeeld toon 'n eenvoudige "gestapel-tot-horisontale" twee-kolom-uitleg, wat beteken dat dit 'n verdeling van 50%/50% op alle skerms tot gevolg sal hê, behalwe vir ekstra klein skerms, wat dit outomaties sal stapel (100%):
kol-sm-6
kol-sm-6
Voorbeeld: Gestapel-tot-horisontaal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Wenk: Die getalle in die .col-sm-*klasse dui aan hoeveel kolomme die div moet strek (uit 12). Dus, .col-sm-1strek oor 1 kolom, .col-sm-4strek oor 4 kolomme,
.col-sm-6strek oor 6 kolomme, ens.
Let wel: Maak seker dat die som altyd 12 optel!
Wenk: Jy kan enige vaste-wydte-uitleg in 'n volwydte- uitleg verander deur die .containerklas te verander na .container-fluid:
Voorbeeld: Vloeistofhouer
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>