Foarbylden fan bootstrap-grid
Basisraster-yndielingen om jo fertroud te meitsjen mei it bouwen binnen it Bootstrap-rastersysteem.
Yn dizze foarbylden .themed-grid-col
wurdt de klasse tafoege oan 'e kolommen om wat tema's ta te foegjen. Dit is gjin klasse dy't standert beskikber is yn Bootstrap.
Fiif raster tiers
D'r binne fiif lagen foar it Bootstrap-rastersysteem, ien foar elk berik fan apparaten dy't wy stypje. Elke tier begjint op in minimale viewportgrutte en jildt automatysk foar de gruttere apparaten, útsein as oerskreaun.
Trije gelikense kolommen
Krij trije kolommen mei deselde breedte, begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden . Op mobile apparaten, tablets en hjirûnder sille de kolommen automatysk steapele wurde.
Trije gelikense kolommen alternatyf
Troch de .row-cols-*
klassen te brûken, kinne jo maklik in raster meitsje mei gelikense kolommen.
.col
bern fan
.row-cols-md-3
.col
bern fan
.row-cols-md-3
.col
bern fan
.row-cols-md-3
Trije ûngelikense kolommen
Krij trije kolommen begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden fan ferskate breedtes. Unthâld dat rasterkolommen oant tolve moatte optelle foar ien horizontaal blok. Mear dan dat, en kolommen begjinne te stapeljen, nettsjinsteande de viewport.
Twa kolommen
Krij twa kolommen begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden .
Folsleine breedte, inkele kolom
Gjin rasterklassen binne nedich foar eleminten mei folsleine breedte.
Twa kolommen mei twa nestele kolommen
Neffens de dokumintaasje is nesting maklik - pleats gewoan in rige kolommen yn in besteande kolom. Dit jout jo twa kolommen begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden , mei noch twa (lykweardige breedtes) binnen de gruttere kolom.
By mobyl apparaatgrutte, tablets en del, sille dizze kolommen en har nestele kolommen steapele wurde.
Mixed: mobyl en buroblêd
It Bootstrap v4-rastersysteem hat fiif lagen fan klassen: xs (ekstra lyts, dizze klasse-ynfix wurdt net brûkt), sm (lyts), md (medium), lg (grut), en xl (ekstra grut). Jo kinne hast elke kombinaasje fan dizze klassen brûke om mear dynamyske en fleksibele yndielingen te meitsjen.
Eltse tier fan klassen skaalfergrutting, wat betsjut dat as jo fan plan binne deselde breedtes yn te stellen foar md, lg en xl, moatte jo allinich md opjaan.
Mixed: mobyl, tablet en buroblêd
Gutters
Mei .gx-*
klassen kinne de horizontale goaten oanpast wurde.
.col
mei
.gx-4
goaten
.col
mei
.gx-4
goaten
.col
mei
.gx-4
goaten
.col
mei
.gx-4
goaten
.col
mei
.gx-4
goaten
.col
mei
.gx-4
goaten
Brûk de .gy-*
klassen om de fertikale goaten te kontrolearjen.
.col
mei
.gy-4
goaten
.col
mei
.gy-4
goaten
.col
mei
.gy-4
goaten
.col
mei
.gy-4
goaten
.col
mei
.gy-4
goaten
.col
mei
.gy-4
goaten
Mei .g-*
klassen kinne de goaten yn beide rjochtingen oanpast wurde.
.col
mei
.g-3
goaten
.col
mei
.g-3
goaten
.col
mei
.g-3
goaten
.col
mei
.g-3
goaten
.col
mei
.g-3
goaten
.col
mei
.g-3
goaten
Containers
Oanfoljende klassen tafoege yn Bootstrap v4.4 tastean konteners dy't 100% breed oant in bepaald brekpunt. v5 foeget in nij xxl
brekpunt ta.