Bootstrap grid ingero

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

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

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

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), 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 xs na sm, ukeneye kwerekana xs gusa.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Uruvange: mobile, tablet, na desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4