Bootstrap Grid Voorbeelde
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 sal die kolomme outomaties gestapel word:
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>
Drie ongelyke kolomme
Die volgende voorbeeld wys hoe om 'n drie kolomme met verskillende breedtes te kry wat by tablette begin en na groot rekenaars skaal:
Voorbeeld
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</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>
Geen geute nie
Gebruik die .row-no-guttersklas om die geute van 'n ry en sy kolomme te verwyder:
Voorbeeld
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Twee kolomme met twee geneste kolomme
Die volgende voorbeeld wys hoe om twee kolomme te kry wat by tablette begin en na groot rekenaars skaal, met nog twee kolomme (gelyke breedtes) binne die groter kolom (by selfone sal hierdie kolomme en hul geneste kolomme gestapel word):
Voorbeeld
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
gemeng: selfoon en rekenaar
Die Bootstrap-roosterstelsel het vier klasse: xs (fone), sm (tablette), md (rekenaars) en lg (groter rekenaars). Die klasse kan gekombineer word om meer dinamiese en buigsame uitlegte te skep.
Wenk: Elke klas skaal op, so as jy dieselfde breedtes vir xs en sm wil stel, hoef jy net xs te spesifiseer.
Voorbeeld
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Wenk: Onthou dat roosterkolomme tot twaalf vir 'n ry moet optel. Meer as dit, kolomme sal gestapel word, ongeag die uitsigpoort.
Gemengde: Selfoon, tablet en rekenaar
Voorbeeld
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Duidelike vlotte
Duidelike vlotte (met die .clearfixklas) by spesifieke breekpunte om vreemde wikkeling met ongelyke inhoud te voorkom:
Voorbeeld
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Verrekening van kolomme
Skuif kolomme na regs deur .col-md-offset-*klasse te gebruik. Hierdie klasse verhoog die linkerkantlyn van 'n kolom met * kolomme:
Voorbeeld
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Druk En Trek - Verander Kolombestelling
Verander die volgorde van die roosterkolomme met .col-md-push-*en
.col-md-pull-*klasse:
Voorbeeld
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>