Bootstrap 4 -roosterstelsel
Bootstrap 4-roosterstelsel
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 wyer 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 herrangskik na gelang van die skermgrootte: Op 'n groot skerm lyk dit dalk beter met die inhoud wat in drie kolomme georganiseer is, maar op 'n klein skerm sal dit beter wees as die inhouditems gestapel is bo-op mekaar.
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.
Roosterstelselreëls
Sommige Bootstrap 4-roosterstelselreëls:
- Rye moet binne 'n
.container(vaste breedte) of.container-fluid(volle breedte) geplaas word vir behoorlike belyning en opvulling - Gebruik rye om horisontale groepe kolomme te skep
- Inhoud moet binne kolomme geplaas word, en slegs kolomme mag onmiddellike kinders van rye wees
- Vooraf gedefinieerde klasse soos
.rowen.col-sm-4is beskikbaar om vinnig roosteruitlegte te maak - Kolomme skep geute (gapings tussen kolominhoud) via vulling. Daardie opvulling word verreken in rye vir die eerste en laaste kolom via negatiewe marge op
.rows - Roosterkolomme word geskep deur die aantal 12 beskikbare kolomme wat jy wil span te spesifiseer. Byvoorbeeld, drie gelyke kolomme sal drie gebruik
.col-sm-4 - Kolomwydtes is in persentasie, so hulle is altyd vloeibaar en groot relatief tot hul ouerelement
- Die grootste verskil tussen Bootstrap 3 en Bootstrap 4 is dat Bootstrap 4 nou flexbox gebruik, in plaas van floats. Een groot voordeel met flexbox is dat roosterkolomme sonder 'n gespesifiseerde breedte outomaties as "gelyke breedtekolomme" (en gelyke hoogte) uitgelê word. Voorbeeld: Drie elemente met
.col-smsal elkeen outomaties 33,33% breed wees vanaf die klein breekpunt en hoër. Wenk: As jy meer wil leer oor Flexbox, kan jy ons CSS Flexbox-tutoriaal lees .
Let daarop dat Flexbox nie in IE9 en vroeër weergawes ondersteun word nie.
As jy IE8-9-ondersteuning benodig, gebruik Bootstrap 3. Dit is die mees stabiele weergawe van Bootstrap, en dit word steeds deur die span ondersteun vir kritieke foutoplossings en dokumentasieveranderings. Geen nuwe kenmerke sal egter daarby gevoeg word nie.
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 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 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 altyd 12 vir elke ry moet optel.
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.
Grid Opsies
Die volgende tabel som op hoe die Bootstrap 4-roosterstelsel oor verskillende skermgroottes werk:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
Voorbeelde
Die volgende hoofstukke toon voorbeelde van roosterstelsels vir verskillende toestelle en skermwydtes:
- Gestapel-tot-horisontaal
- Ekstra klein uitleg
- Klein toestelle
- Medium toestelle
- Groot toestelle
- Ekstra groot toestelle
- Meer rooster voorbeelde