Példák a rendszerindító rácsra

Alapvető rácselrendezések, amelyek segítségével megismerkedhet a Bootstrap rácsrendszeren belüli építéssel.

Öt rácsszint

A Bootstrap grid rendszernek öt szintje van, minden általunk támogatott eszközcsoporthoz egy. Minden réteg egy minimális nézetablakmérettel kezdődik, és automatikusan érvényes a nagyobb eszközökre, hacsak nem bírálják felül.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Három egyenlő oszlop

Kapjon három egyenlő szélességű oszlopot az asztali számítógépektől kezdve a nagy asztali számítógépekig . Mobileszközökön, táblagépeken és ezek alatt az oszlopok automatikusan egymásra halmozódnak.

.col-md-4
.col-md-4
.col-md-4

Három egyenlőtlen oszlop

Kapjon három oszlopot az asztali számítógépektől kezdve, és méretezve a különböző szélességű , nagy asztali számítógépekre . Ne feledje, hogy a rácsoszlopoknak legfeljebb tizenkettőnek kell lenniük egyetlen vízszintes blokkhoz. Sőt, az oszlopok a nézettől függetlenül elkezdenek egymásra halmozódni.

.col-md-3
.col-md-6
.col-md-3

Két oszlop

Kapjon két oszlopot az asztali számítógépektől kezdve a nagy asztali számítógépekig .

.col-md-8
.col-md-4

Teljes szélességű, egyoszlopos

A teljes szélességű elemekhez nincs szükség rácsosztályokra.


Két oszlop két egymásba ágyazott oszloppal

A dokumentáció szerint a beágyazás egyszerű – csak helyezzen el egy sor oszlopot egy meglévő oszlopon belül. Ez két oszlopot ad, amelyek az asztaloktól kezdődnek, és nagy asztali számítógépekre léptethetők át , a másik kettő pedig (egyenlő szélességű) a nagyobb oszlopon belül.

Mobileszköz-méreteknél, táblagépeken és lefelé, ezek az oszlopok és beágyazott oszlopaik egymásra halmozódnak.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Vegyes: mobil és asztali

A Bootstrap v4 grid rendszer öt osztályból áll: xs (extra kicsi), sm (kicsi), md (közepes), lg (nagy) és xl (extra nagy). Ezen osztályok szinte bármilyen kombinációját használhatja dinamikusabb és rugalmasabb elrendezések létrehozásához.

Az osztályok minden szintje felfelé skálázódik, vagyis ha ugyanazt a szélességet tervezi beállítani az xs-hez és az sm-hez, akkor csak az x-eket kell megadnia.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Vegyes: mobil, táblagép és asztali

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4