Ebyokulabirako bya bootstrap grid

Ensengeka za grid ezisookerwako okukumanyiiza okuzimba munda mu nkola ya Bootstrap grid.

Mu byokulabirako bino .themed-grid-colekibiina kyongerwa ku mpagi okwongerako omulamwa ogumu. Eno si kiraasi esangibwa mu Bootstrap nga bwekiba.

Emitendera gya grid etaano

Waliwo emitendera etaano ku nkola ya Bootstrap grid, emu ku buli lunyiriri lw’ebyuma bye tuwagira. Buli mutendera gutandikira ku sayizi y'ekifo eky'okulaba ekitono ennyo era gukola mu ngeri ey'otoma ku byuma ebinene okuggyako nga gukyusiddwa.

.col-4 nga bwe kiri

.col-sm-4 nga bwe kiri

.col-md-4 nga bwe kiri

.col-lg-4 nga bwe kiri

.col-xl-4 nga bwe kiri

.col-xxl-4 nga bwe kiri

Empagi ssatu ezenkanankana

Funa ennyiriri ssatu ez'obugazi obwenkanankana okutandika ku desktops n'okulinnyisa okutuuka ku desktops ennene . Ku byuma ebikozesebwa ku ssimu, tabuleti ne wansi, empagi zijja kuzimba butereevu.

.col-md-4 nga bwe kiri

Ennyiriri ssatu ezenkanankana alternative

Nga okozesa .row-cols-*kiraasi, osobola bulungi okukola ekisenge ekirimu ennyiriri ezenkanankana.

.colomwana wa .row-cols-md-3

Empagi ssatu ezitenkanankana

Funa ennyiriri ssatu okutandika ku desktops n’okulinnyisa okutuuka ku desktops ennene ez’obugazi obw’enjawulo. Jjukira, empagi za giridi zirina okugattako okutuuka ku kkumi na bbiri ku bulooka emu ey’okwebungulula. Okusinga awo, era ennyiriri zitandika okutuuma si nsonga viewport.

.col-md-3 nga bwe kiri

.col-md-6 nga bwe kiri

.col-md-3 nga bwe kiri

Empagi bbiri

Funa ennyiriri bbiri okutandika ku desktops n'okulinnyisa okutuuka ku desktops ennene .

.col-md-8 nga bwe kiri

.col-md-4 nga bwe kiri

Obugazi obujjuvu, empagi emu

Tewali kiraasi za giridi zeetaagisa ku elementi ez'obugazi obujjuvu.

Ennyiriri bbiri ezirina ennyiriri bbiri eziteekeddwa mu kiyumba

Per the documentation, nesting is easy —mala okuteeka olunyiriri lw’ennyiriri munda mu mpagi eriwo. Kino kikuwa ennyiriri bbiri ezitandikira ku desktops ne zikula okutuuka ku desktops ennene , nga waliwo endala bbiri (obugazi obwenkanankana) munda mu nnyiriri ennene.

Ku sayizi z’ebyuma ebikozesebwa ku ssimu, tabuleti ne wansi, empagi zino n’ennyiriri zazo eziteekeddwa mu kiyumba zijja kutuuma.

.col-md-8 nga bwe kiri

.col-md-6 nga bwe kiri

.col-md-4 nga bwe kiri

Ebitabuddwamu: essimu ne desktop

Enkola ya Bootstrap v5 grid erina emitendera mukaaga egya kiraasi: xs (entono ennyo, infix eno eya kiraasi tekozesebwa), sm (entono), md (wa wakati), lg (ennene), xl (x-ennene), ne xxl (xx -gazi). Osobola okukozesa kumpi omugatte gwonna ogwa kiraasi zino okukola ensengeka ezisinga okubeera ez’amaanyi era ezikyukakyuka.

Buli mutendera gwa kiraasi gukula, ekitegeeza nti bw’oba oteekateeka okuteekawo obugazi bwe bumu ku md, lg, xl ne xxl, olina okulaga md yokka.

.col-md-8 nga bwe kiri

.kol-6 .kolo-md-4

.col-6 nga bwe kiri

Ebitabuddwamu: essimu, tabuleti, ne kompyuta

.kol-sm-6 .kolo-lg-8

.kol-6 .kolo-lg-4

.kol-6 .kolo-sm-4

Emifulejje

Nga olina .gx-*kiraasi, emifulejje egy’okwebungulula gisobola okutereezebwa.

.colnga balina .gx-4emifulejje

Kozesa .gy-*kiraasi okufuga emifulejje egy’ennyiriri (vertical gutters).

.colnga balina .gy-4emifulejje

Nga olina .g-*kiraasi, emifulejje mu njuyi zombi gisobola okutereezebwa.

.colnga balina .g-3emifulejje

Ebintu ebiteekebwamu ebintu

Ebika ebirala ebyongezeddwa mu Bootstrap v4.4 bikkiriza ebitereke ebigazi 100% okutuusa ku breakpoint entongole. v5 eyongerako ekifo ekipya xxleky'okumenya.

.ekintu ekitereka

.ekintu ekitereka-sm

.ekintu ekitereka-md

.ekintu ekitereka-lg

.ekintu ekitereka-xl

.ekintu ekitereka-xxl

.ekibya-amazzi