Mehlala ea grid ea Bootstrap

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

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 3 e na le mekhahlelo e mene ea lihlopha: xs (lifono), sm (matlapa), md (desktop), le lg (li-desktops tse kholoanyane). 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-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

Li kopane: mobile, tablet, le desktop

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

Ho hleka kholomo

Ho phaphamala ho hlakileng libakeng tse ikhethileng ho thibela ho phuthela ka mokhoa o sa tsitsang ka lintho tse sa lekanang.

.col-xs-6 .col-sm-3
Resize your viewport kapa e hlahlobe fonong ea hao ho etsa mohlala.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, sututsa, 'me pull resets

Seta bocha li-offsets, pushs, le pulls libakeng tse ikhethileng.

.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