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-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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

Tulo ka managsama nga kolum nga alternatibo

Pinaagi sa paggamit sa mga .row-cols-*klase, dali ka makahimo usa ka grid nga adunay parehas nga mga kolum.

.colanak sa .row-cols-md-3

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-4

Mixed: mobile ug desktop

Ang Bootstrap v5 grid system adunay unom ka hut-ong sa mga klase: xs (sobrang gamay, kini nga class infix wala gigamit), sm (gamay), md (medium), lg (dako), xl (x-dako), ug xxl (xx - 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, nagpasabut nga kung nagplano ka nga magbutang sa parehas nga gilapdon alang sa md, lg, xl ug xxl, kinahanglan nimo nga itakda ang md.

.col-md-8

.col-6 .col-md-4

.col-6

Mixed: mobile, tablet, ug desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Mga kanal

Uban sa .gx-*mga klase, ang pinahigda nga mga kanal mahimong ma-adjust.

.coluban sa mga .gx-4kanal

Gamita ang mga .gy-*klase aron makontrol ang mga bertikal nga kanal.

.coluban sa mga .gy-4kanal

Sa .g-*mga klase, ang mga kanal sa duha ka direksyon mahimong ma-adjust.

.coluban sa mga .g-3kanal

Mga sudlanan

Ang dugang nga mga klase nga gidugang sa Bootstrap v4.4 nagtugot sa mga sudlanan nga 100% ang gilapdon hangtod sa usa ka partikular nga breakpoint. v5 nagdugang ug bag-ong xxlbreakpoint.

.sudlanan

.sudlanan-sm

.container-md

.sudlanan-lg

.sudlanan-xl

.sudlanan-xxl

.container-fluid