Mehlala ea grid ea Bootstrap

Mehaho ea mantlha ea grid ho u tloaelana le moaho ka har'a sistimi ea grid ea Bootstrap.

Mehlaleng ena .themed-grid-colsehlopha se eketsoa likholomong ho eketsa lihlooho tse ling. Sena ha se sehlopha se fumanehang ho Bootstrap ka ho sa feleng.

Li-grid tse hlano

Ho na le mekhahlelo e mehlano ho sistimi ea grid ea Bootstrap, e le 'ngoe bakeng sa mofuta o mong le o mong oa lisebelisoa tseo re li tšehetsang. Karolo e 'ngoe le e 'ngoe e qala ka boholo ba bonyane ba sebaka sa pono 'me e sebetsa ka bo eona ho lisebelisoa tse kholo ntle le haeba e fetisitsoe.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Litšiea tse tharo tse lekanang

Fumana likholomo tse tharo tse bophara bo lekanang ho qala ho li-desktops le ho ea ho li-desktops tse kholo . Ho lisebelisoa tsa cellular, matlapa le ka tlase, likholomo li tla ikamahanya le maemo.

.col-md-4
.col-md-4
.col-md-4

Litšiea tse tharo tse sa lekanang

Fumana litšiea tse tharo ho qala ho li-desktops le ho ea ho li-desktops tse kholo tsa bophara bo fapaneng. Hopola, litšiea tsa grid li lokela ho fihla ho leshome le metso e 'meli bakeng sa boloko bo le bong bo otlolohileng. Ho feta moo, 'me likholomo li qala ho bokellana ho sa tsotelehe sebaka sa pono.

.col-md-3
.col-md-6
.col-md-3

Litšiea tse peli

Fumana litšiea tse peli ho qala ho li-desktops le ho ea ho li-desktops tse kholo .

.col-md-8
.col-md-4

Bophara bo felletseng, kholomo e le 'ngoe

Ha ho litlelase tsa grid tse hlokahalang bakeng sa likarolo tse felletseng.

Litšiea tse peli tse nang le litšiea tse peli

Ho latela litokomane, ho haha ​​sehlaha ho bonolo - beha feela mela e mengata ka har'a kholomo e teng. Sena se u fa likholomo tse peli ho qala ho li-desktops le ho hola ho li-desktops tse kholo , ka tse ling tse peli (bophara bo lekanang) ka har'a kholomo e kholoanyane.

Ka boholo ba lisebelisoa tsa mohala, matlapa le tlase, litšiea tsena le litšiea tsa tsona tse behiloeng li tla bokellana.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

E kopantsoe: mobile le desktop

Sistimi ea grid ea Bootstrap v4 e na le mekhahlelo e mehlano ea lihlopha: xs (e nyane haholo), sm (e nyane), md (bohareng), lg (e kholo), le xl (e kholo haholo). U ka sebelisa hoo e batlang e le motsoako ofe kapa ofe oa lihlopha tsena ho theha meralo e matla le e feto-fetohang.

Sehlopha se seng le se seng sa lihlopha sea phahama, ho bolelang hore haeba u rera ho beha bophara bo lekanang bakeng sa xs le sm, u hloka feela ho hlakisa xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Li kopane: mobile, tablet, le desktop

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