Bootstrap grid ingero

Imiterere yibanze ya gride kugirango tumenye inyubako muri sisitemu ya Bootstrap.

Muri izo ngero urwego .themed-grid-colrwongewe kumurongo kugirango wongere insanganyamatsiko. Ntabwo aricyiciro kiboneka muri Bootstrap kubisanzwe.

Imirongo itanu ya gride

Hano hari ibyiciro bitanu kuri sisitemu ya Bootstrap, imwe kuri buri cyiciro cyibikoresho dushyigikiye. Buri cyiciro gitangirira ku bunini bwo kureba kandi gihita gikoreshwa ku bikoresho binini keretse birenze.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Inkingi eshatu zingana

Kubona inkingi eshatu zingana- zitangirira kuri desktop no gupima kuri desktop nini . Ku bikoresho bigendanwa, ibinini na hepfo, inkingi zizahita zegeranya.

.col-md-4

Inkingi eshatu zingana

Ukoresheje .row-cols-*amasomo, urashobora gukora byoroshye gride hamwe ninkingi zingana.

.columwana wa .row-cols-md-3

Inkingi eshatu zingana

Shaka inkingi eshatu zitangirira kuri desktop no gupima kuri desktop nini y'ubugari butandukanye. Wibuke, grid inkingi igomba kongeramo cumi na zibiri kumurongo umwe utambitse. Birenze ibyo, kandi inkingi zitangira gutondeka ntakibazo cyo kureba.

.col-md-3

.col-md-6

.col-md-3

Inkingi ebyiri

Shaka inkingi ebyiri zitangirira kuri desktop no gupima kuri desktop nini .

.col-md-8

.col-md-4

Ubugari bwuzuye, inkingi imwe

Nta gride y'ibyiciro ikenewe kubintu byuzuye-ubugari.

Inkingi ebyiri hamwe ninkingi ebyiri zegeranye

Kuri inyandiko, guteramo biroroshye-shyira umurongo winkingi murwego ruriho. Ibi biguha inkingi ebyiri zitangirira kuri desktop no gupima kuri desktop nini , hamwe nibindi bibiri (ubugari bungana) murwego runini.

Ku bunini bwibikoresho bigendanwa, tableti no hepfo, izi nkingi hamwe ninkingi zazo zashyizwe hamwe.

.col-md-8

.col-md-6

.col-md-4

Uruvange: mobile na desktop

Sisitemu ya Bootstrap v4 ifite ibyiciro bitanu byamasomo: xs (ntoya nto, iyi infix yo mucyiciro ntabwo ikoreshwa), sm (nto), md (hagati), lg (nini), na xl (binini cyane). Urashobora gukoresha hafi guhuza ibyiciro byose kugirango ukore byinshi kandi byoroshye.

Buri cyiciro cyamasomo gipima, bivuze niba uteganya gushiraho ubugari bumwe kuri md, lg na xl, ukeneye kwerekana md gusa.

.col-md-8

.col-6 .col-md-4

.col-6

Uruvange: mobile, tablet, na desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Gutera

Hamwe .gx-*namasomo, imiyoboro itambitse irashobora guhinduka.

.colhamwe .gx-4n'umuyoboro

Koresha .gy-*amasomo kugirango ugenzure imiyoboro ihanamye.

.colhamwe .gy-4n'umuyoboro

Hamwe .g-*namasomo, imyanda mubyerekezo byombi irashobora guhinduka.

.colhamwe .g-3n'umuyoboro

Ibikoresho

Amasomo yinyongera yongewe muri Bootstrap v4.4 yemerera kontineri zifite ubugari 100% kugeza igihe cyacitse. v5 yongeyeho ingingo nshya xxl.

.ububiko

.container-sm

.umubitsi-md

.ububiko-lg

.container-xl

.umubitsi-xxl

.ibikoresho