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-col
osztá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 írják felül.
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.
Három egyenlő oszlop alternatíva
Az .row-cols-*
osztályok használatával könnyedén létrehozhat egy egyenlő oszlopú rácsot.
.col
gyermeke
.row-cols-md-3
.col
gyermeke
.row-cols-md-3
.col
gyermeke
.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ézetablakra való tekintet nélkül egymásra halmozódnak.
Két oszlop
Kapjon két oszlopot az asztali számítógépektől kezdve a nagy asztali számítógépekig .
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 asztali számítógépektől kezdődnek, és nagyméretű asztali számítógépekre léptethetők át , és további kettő (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.
Vegyes: mobil és asztali
A Bootstrap v4 grid rendszernek öt osztálya van: xs (extra kicsi, ez az osztályinfix nem használatos), 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 md, lg és xl számára, akkor csak az md-t kell megadnia.
Vegyes: mobil, táblagép és asztali
Ereszcsatornák
Osztályokkal a .gx-*
vízszintes ereszcsatornák állíthatók.
.col
.gx-4
ereszcsatornákkal
_
.col
.gx-4
ereszcsatornákkal
_
.col
.gx-4
ereszcsatornákkal
_
.col
.gx-4
ereszcsatornákkal
_
.col
.gx-4
ereszcsatornákkal
_
.col
.gx-4
ereszcsatornákkal
_
Használja az .gy-*
osztályokat a függőleges ereszcsatornák vezérlésére.
.col
.gy-4
ereszcsatornákkal
_
.col
.gy-4
ereszcsatornákkal
_
.col
.gy-4
ereszcsatornákkal
_
.col
.gy-4
ereszcsatornákkal
_
.col
.gy-4
ereszcsatornákkal
_
.col
.gy-4
ereszcsatornákkal
_
Osztályokkal az .g-*
ereszcsatornák mindkét irányban állíthatók.
.col
.g-3
ereszcsatornákkal
_
.col
.g-3
ereszcsatornákkal
_
.col
.g-3
ereszcsatornákkal
_
.col
.g-3
ereszcsatornákkal
_
.col
.g-3
ereszcsatornákkal
_
.col
.g-3
ereszcsatorná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 xxl
töréspontot ad hozzá.