Zitsanzo za grid ya Bootstrap

Masanjidwe a gridi oyambira kuti mudziwe zomanga mkati mwa dongosolo la grid ya Bootstrap.

M'zitsanzo izi .themed-grid-colkalasiyo imawonjezedwa kumagulu kuti awonjezere mitu ina. Ili si kalasi yomwe imapezeka mu Bootstrap mwachisawawa.

Magawo asanu a gridi

Pali magawo asanu pagulu la Bootstrap grid, imodzi pazida zilizonse zomwe timathandizira. Gawo lililonse limayamba pamlingo wocheperako ndipo limagwira ntchito pazida zazikulu pokhapokha zitasinthidwa.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Mizati itatu yofanana

Pezani mizati itatu yofanana m'lifupi kuyambira pa desktops ndikukula mpaka ma desktops akulu . Pazida zam'manja, mapiritsi ndi m'munsimu, mizati idzangounjika yokha.

.col-md-4

Njira zitatu zofananira zina

Pogwiritsa ntchito .row-cols-*makalasi, mutha kupanga gridi yokhala ndi mizati yofanana.

.colmwana wa .row-cols-md-3

Mizati itatu yosiyana

Pezani mizati itatu kuyambira pa desktops ndikukula mpaka ma desktops akulu osiyanasiyana m'lifupi. Kumbukirani, mizati ya gululi iyenera kuonjeza mpaka khumi ndi awiri pa chipika chimodzi chopingasa. Kupitilira apo, ndipo mizati imayamba kuunjika mosasamala kanthu za malo owonera.

.col-md-3

.col-md-6

.col-md-3

Mizati iwiri

Pezani mizati iwiri kuyambira pa desktops ndikukula mpaka ma desktops akulu .

.col-md-8

.col-md-4

M'lifupi mwake, ndime imodzi

Palibe makalasi a gridi omwe ali ofunikira pazambiri zonse.

Mizati iwiri yokhala ndi mizati iwiri yokhazikika

Malinga ndi zolembedwa, kumanga zisa ndikosavuta - ingoikani mizere ingapo mkati mwa gawo lomwe lilipo. Izi zimakupatsani mizati iwiri kuyambira pa desktops ndikukula mpaka ma desktops akulu , ndi zina ziwiri (zofanana m'lifupi) mkati mwa gawo lalikulu.

Pamiyezo yazida zam'manja, mapiritsi ndi pansi, zigawo izi ndi zisa zake zidzachulukana.

.col-md-8

.col-md-6

.col-md-4

Zosakanikirana: mafoni ndi desktop

Dongosolo la grid ya Bootstrap v5 lili ndi magawo asanu ndi limodzi a makalasi: xs (owonjezera pang'ono, kalasi iyi infix sikugwiritsidwa ntchito), sm (yaing'ono), md (yapakati), lg (yayikulu), xl (x-large), ndi xxl (xx) - wamkulu). Mutha kugwiritsa ntchito pafupifupi kuphatikiza kulikonse kwa makalasiwa kuti mupange masanjidwe osinthika komanso osinthika.

Gulu lililonse la makalasi limakula, kutanthauza kuti ngati mukufuna kukhazikitsa m'lifupi mwake md, lg, xl ndi xxl, muyenera kungotchula md.

.col-md-8

.col-6 .col-md-4

.col-6

Zosakanikirana: mafoni, piritsi, ndi desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Mitsinje

Ndi .gx-*makalasi, ma gutter opingasa amatha kusinthidwa.

.colndi .gx-4ngalande

Gwiritsani ntchito .gy-*magalasi kuti muwongolere mitsinje yoyima.

.colndi .gy-4ngalande

Ndi .g-*makalasi, ma gutter mbali zonse ziwiri amatha kusinthidwa.

.colndi .g-3ngalande

Zotengera

Makalasi owonjezera omwe adawonjezedwa mu Bootstrap v4.4 amalola zotengera zomwe zili ndi 100% m'lifupi mpaka malo ena osweka. v5 imawonjezera gawo latsopano xxl.

.chotengera

.chotengera-sm

.container-md

.chotengera-lg

.container-xl

.chosungira-xxl

.mtsuko-madzi