Bootstrap 4 roosters
Bootstrap 4-roosterstelsel
Bootstrap se roosterstelsel is gebou met flexbox en 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 | |||||||||||
Die roosterstelsel reageer, en die kolomme sal outomaties herrangskik na gelang van die skermgrootte.
Maak seker dat die som 12 of minder optel (dit is nie nodig dat jy al 12 beskikbare kolomme gebruik nie).
Roosterklasse
Die Bootstrap 4-roosterstelsel het vyf klasse:
.col-(ekstra klein toestelle - skermwydte minder as 576px).col-sm-(klein toestelle - skermwydte gelyk aan of groter as 576px).col-md-(medium toestelle - skermwydte gelyk aan of groter as 768 px).col-lg-(groot toestelle - skermwydte gelyk aan of groter as 992px).col-xl-(xlarge toestelle - skermwydte gelyk aan of groter as 1200px)
Die klasse hierbo kan gekombineer word om meer dinamiese en buigsame uitlegte te skep.
Wenk: Elke klas skaal op, so as jy dieselfde breedtes vir
smen wil stel md, hoef jy net te spesifiseer sm.
Basiese struktuur van 'n Bootstrap 4-rooster
Die volgende is 'n basiese struktuur van 'n Bootstrap 4-rooster:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Eerste voorbeeld: skep 'n ry ( <div
class="row">). Voeg dan die verlangde aantal kolomme by (etikette met toepaslike
.col-*-*klasse). Die eerste ster (*) verteenwoordig die responsiwiteit: sm, md, lg of xl, terwyl die tweede ster 'n getal verteenwoordig, wat tot 12 vir elke ry behoort op te tel.
Tweede voorbeeld: in plaas daarvan om 'n nommer by elkeen te voeg col, laat bootstrap die uitleg hanteer, om kolomme met dieselfde breedte te skep: twee "col"elemente = 50% breedte vir elke kol. drie kole = 33.33% breedte vir elke kol. vier kole = 25% breedte, ens. Jy kan ook gebruik .col-sm|md|lg|xlom die kolomme responsief te maak.
Hieronder het ons 'n paar voorbeelde van basiese Bootstrap 4-roosteruitlegte versamel.
Drie gelyke kolomme
Die volgende voorbeeld wys hoe om drie kolomme met gelyke breedte te skep, op alle toestelle en skermwydtes:
Voorbeeld
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsiewe kolomme
Die volgende voorbeeld wys hoe om vier kolomme met gelyke breedte te skep wat by tablette begin en na ekstra groot rekenaars skaal. Op selfone of skerms wat minder as 576 px wyd is, sal die kolomme outomaties bo-op mekaar stapel :
Voorbeeld
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Twee ongelyke responsiewe kolomme
Die volgende voorbeeld wys hoe om twee kolomme met verskillende breedtes te kry wat by tablette begin en na groot ekstra 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 4-roosters leer.