Bootstrap 4 Grid Medium
Medium Grid Voorbeeld
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
In die vorige hoofstuk het ons 'n roostervoorbeeld met klasse vir klein toestelle aangebied. Ons het twee divs (kolomme) gebruik en ons het hulle 'n verdeling van 25%/75% gegee:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Maar op medium toestelle kan die ontwerp beter wees as 'n verdeling van 50%/50%.
Medium toestelle word gedefinieer as 'n skermwydte van 768 pixels tot 991 pixels .
Vir medium toestelle sal ons die .col-md-*klasse gebruik:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Nou gaan Bootstrap sê "by die klein grootte, kyk na klasse met -sm- daarin en gebruik dit. By die medium grootte, kyk na klasse met -md- daarin en gebruik dit".
Die volgende voorbeeld sal lei tot 'n 25%/75% verdeling op klein toestelle en 'n 50%/50% verdeling op medium (en groot en xgroot) toestelle. Op ekstra klein toestelle sal dit outomaties stapel (100%):
Voorbeeld
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Let wel: Maak seker dat die som 12 of minder optel (dit is nie nodig dat jy al 12 beskikbare kolomme gebruik nie):
Gebruik slegs medium
In die voorbeeld hieronder spesifiseer ons slegs die .col-md-6klas (sonder .col-sm-*). Dit beteken dat medium, groot en ekstra groot toestelle 50%/50% sal verdeel – want die klas skaal op. Vir klein en ekstra klein toestelle sal dit egter vertikaal stapel (100% breedte):
Voorbeeld
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Outo-uitlegkolomme
In Bootstrap 4 is daar 'n maklike manier om gelyke breedte kolomme vir alle toestelle te skep: verwyder net die nommer uit .col-md-*en gebruik die .col-mdklas slegs op 'n gespesifiseerde aantal
kol-elemente . Bootstrap sal herken hoeveel kolomme daar is, en elke kolom sal dieselfde breedte kry.
As die skermgrootte minder as 768 px is, sal die kolomme horisontaal gestapel word:
<!-- Two columns: 50% width on medium and up-->
<div class="row">
<div class="col-md">1 of
2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- Four
columns: 25% width on medium and up -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3
of 4</div>
<div class="col-md">4 of 4</div>
</div>
Die volgende hoofstuk wys hoe om 'n ander verdeelpersentasie vir groot toestelle by te voeg.