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.

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 3 grid rendszer négy osztályból áll: xs (telefonok), sm (táblagépek), md (asztali számítógépek) és lg (nagyobb asztali számítógépek). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

Oszloptisztítás

Tiszta úszók bizonyos töréspontokon, hogy megakadályozzák a kényelmetlen csomagolást egyenetlen tartalommal.

.col-xs-6 .col-sm-3
Méretezze át a nézetablakot, vagy nézze meg telefonján példaként.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push és pull reset

Reset eltolások, tolások és húzások meghatározott töréspontokon.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0