Bootstrap grid ingero

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

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
.col-md-4
.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-6
.col-md-4

Uruvange: mobile na desktop

Sisitemu ya Bootstrap 3 ya gride ifite ibyiciro bine byamasomo: xs (terefone), sm (tableti), md (desktop), na lg (desktop nini). 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-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

Uruvange: mobile, tablet, na desktop

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

Gukuraho inkingi

Kureremba kureremba kumurongo wihariye kugirango wirinde gupfunyika nabi hamwe nibintu bitaringaniye.

.col-xs-6 .col-sm-3
Hindura uko ureba cyangwa urebe kuri terefone yawe urugero.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Kureka, gusunika, no gukurura gusubiramo

Ongera usubize offsets, usunike, kandi ukurura ahantu runaka.

.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