Ebyokulabirako bya bootstrap grid

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

Emitendera gya grid etaano

Waliwo emitendera etaano ku nkola ya Bootstrap grid, emu ku buli lunyiriri lw’ebyuma bye tuwagira. Buli mutendera gutandika 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-4 nga bwe kiri
.col-4 nga bwe kiri
.col-sm-4 nga bwe kiri
.col-sm-4 nga bwe kiri
.col-sm-4 nga bwe kiri
.col-md-4 nga bwe kiri
.col-md-4 nga bwe kiri
.col-md-4 nga bwe kiri
.col-lg-4 nga bwe kiri
.col-lg-4 nga bwe kiri
.col-lg-4 nga bwe kiri
.col-xl-4 nga bwe kiri
.col-xl-4 nga bwe kiri
.col-xl-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
.col-md-4 nga bwe kiri
.col-md-4 nga bwe kiri

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

Ebitabuddwamu: essimu ne desktop

Enkola ya Bootstrap v4 grid erina emitendera etaano egya kiraasi: xs (entono ennyo), sm (entono ennyo), md (eza wakati), lg (ennene), ne xl (ennene ennyo). 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 xs ne sm, olina okulaga xs yokka.

.kol-12 .kolo-md-8
.kol-6 .kolo-md-4
.kol-6 .kolo-md-4
.kol-6 .kolo-md-4
.kol-6 .kolo-md-4
.col-6 nga bwe kiri
.col-6 nga bwe kiri

Ebitabuddwamu: essimu, tabuleti, ne kompyuta

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