Mga pananglitan sa bootstrap grid

Panguna nga mga layout sa grid aron pamilyar ka sa pagtukod sulod sa sistema sa grid sa Bootstrap.

Niini nga mga pananglitan ang .themed-grid-colklase gidugang sa mga kolum aron makadugang sa pipila ka tema. Dili kini usa ka klase nga magamit sa Bootstrap pinaagi sa default.

Lima ka grid nga lebel

Adunay lima ka ang-ang sa Bootstrap grid system, usa alang sa matag han-ay sa mga himan nga among gisuportahan. Ang matag hut-ong magsugod sa labing gamay nga gidak-on sa viewport ug awtomatiko nga magamit sa mas dagkong mga aparato gawas kung ma-override.

.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

Tulo ka managsama nga mga kolum

Pagkuha og tulo ka managsama nga gilapdon nga mga kolum sugod sa mga desktop ug pag-scale sa dagkong mga desktop . Sa mga mobile device, mga tablet ug sa ubos, ang mga kolum awtomatikong mag-stack.

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

Tulo ka dili patas nga mga kolum

Pagkuha og tulo ka mga kolum sugod sa mga desktop ug pag-scale ngadto sa dagkong mga desktop nga lainlain ang gilapdon. Hinumdomi, ang mga kolum sa grid kinahanglan nga magdugang hangtod sa dose alang sa usa ka pinahigda nga bloke. Labaw pa niana, ug ang mga kolum nagsugod sa pag-stack bisan unsa pa ang viewport.

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

Duha ka kolum

Pagkuha og duha ka kolum sugod sa mga desktop ug pag-scale sa dagkong mga desktop .

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

Bug-os nga gilapdon, usa ka kolum

Wala'y mga klase sa grid nga gikinahanglan alang sa mga elemento nga puno sa gilapdon.

Duha ka kolum nga adunay duha ka nested column

Sumala sa dokumentasyon, sayon ​​ra ang pagpugad—butang lang ug laray sa mga column sulod sa kasamtangang column. Naghatag kini kanimo og duha ka kolum sugod sa mga desktop ug pag-scale sa dagkong mga desktop , nga adunay laing duha (parehas nga gilapdon) sulod sa mas dako nga kolum.

Sa mga gidak-on sa mobile device, mga tablet ug paubos, kini nga mga kolum ug ang ilang mga salag nga mga kolum mag-stack.

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

Mixed: mobile ug desktop

Ang Bootstrap v4 grid system adunay lima ka hut-ong sa mga klase: xs (sobrang gamay), sm (gamay), md (medium), lg (dako), ug xl (sobra nga dako). Mahimo nimong gamiton ang halos bisan unsang kombinasyon niini nga mga klase aron makahimo og mas dinamiko ug flexible nga mga layout.

Ang matag hut-ong sa mga klase nag-scale, nagpasabot nga kung nagplano ka nga magbutang sa parehas nga gilapdon alang sa xs ug sm, kinahanglan ra nimo nga itakda ang 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

Mixed: mobile, tablet, ug 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