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.

Ezekben a példákban az .themed-grid-colosztály hozzáadódik az oszlopokhoz, hogy témát adjon hozzá. Ez nem egy olyan osztály, amely alapértelmezés szerint elérhető a Bootstrapban.

Ö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
.col-xxl-4
.col-xxl-4
.col-xxl-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ő oszlop alternatíva

Az .row-cols-*osztályok használatával könnyedén létrehozhat egy egyenlő oszlopú rácsot.

.colgyermeke .row-cols-md-3
.colgyermeke .row-cols-md-3
.colgyermeke .row-cols-md-3

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 v5 grid rendszernek hat osztálya van: xs (extra kicsi, ez az osztályinfix nem használatos), sm (kicsi), md (közepes), lg (nagy), xl (x-large) és xxl (xx) -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 rétege felfelé skálázódik, vagyis ha ugyanazt a szélességet tervezi beállítani az md, lg, xl és xxl számára, akkor csak az md-t kell megadnia.

.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-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

Ereszcsatornák

Osztályokkal a .gx-*vízszintes ereszcsatornák állíthatók.

.col.gx-4ereszcsatornákkal _
.col.gx-4ereszcsatornákkal _
.col.gx-4ereszcsatornákkal _
.col.gx-4ereszcsatornákkal _
.col.gx-4ereszcsatornákkal _
.col.gx-4ereszcsatornákkal _

Használja az .gy-*osztályokat a függőleges ereszcsatornák vezérlésére.

.col.gy-4ereszcsatornákkal _
.col.gy-4ereszcsatornákkal _
.col.gy-4ereszcsatornákkal _
.col.gy-4ereszcsatornákkal _
.col.gy-4ereszcsatornákkal _
.col.gy-4ereszcsatornákkal _

Osztályokkal az .g-*ereszcsatornák mindkét irányban állíthatók.

.col.g-3ereszcsatornákkal _
.col.g-3ereszcsatornákkal _
.col.g-3ereszcsatornákkal _
.col.g-3ereszcsatornákkal _
.col.g-3ereszcsatornákkal _
.col.g-3ereszcsatornákkal _

Konténerek

A Bootstrap v4.4-ben hozzáadott további osztályok lehetővé teszik a 100%-ban széles tárolókat egy adott töréspontig. A v5 új xxltöréspontot ad hozzá.

.tartály
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.tartály-folyadék