Mga halimbawa ng bootstrap grid

Mga pangunahing layout ng grid para maging pamilyar ka sa pagbuo sa loob ng Bootstrap grid system.

Tatlong pantay na hanay

Kumuha ng tatlong magkaparehong lapad na column simula sa mga desktop at pag-scale sa malalaking desktop . Sa mga mobile device, tablet at sa ibaba, awtomatikong magsasalansan ang mga column.

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

Tatlong hindi pantay na hanay

Kumuha ng tatlong column simula sa mga desktop at pag-scale sa malalaking desktop na may iba't ibang lapad. Tandaan, ang mga hanay ng grid ay dapat magdagdag ng hanggang labindalawa para sa isang pahalang na bloke. Higit pa riyan, at ang mga column ay nagsisimulang mag-stack kahit na ang viewport.

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

Dalawang column

Kumuha ng dalawang column simula sa mga desktop at pag-scale sa malalaking desktop .

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

Buong lapad, solong hanay

Walang mga klase ng grid ang kailangan para sa mga full-width na elemento.

Dalawang column na may dalawang nested column

Alinsunod sa dokumentasyon, madali ang pagpupugad—maglagay lang ng hilera ng mga column sa loob ng isang umiiral nang column. Nagbibigay ito sa iyo ng dalawang column simula sa mga desktop at pag-scale sa malalaking desktop , na may dalawa pang (pantay na lapad) sa loob ng mas malaking column.

Sa mga laki ng mobile device, mga tablet at pababa, ang mga column na ito at ang kanilang mga nested na column ay magsasalansan.

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

Mixed: mobile at desktop

Ang Bootstrap 3 grid system ay may apat na tier ng mga klase: xs (mga telepono), sm (tablets), md (desktop), at lg (mas malalaking desktop). Maaari mong gamitin ang halos anumang kumbinasyon ng mga klase na ito upang lumikha ng mas dynamic at flexible na mga layout.

Ang bawat baitang ng mga klase ay tumataas, ibig sabihin, kung plano mong itakda ang parehong lapad para sa xs at sm, kailangan mo lamang tukuyin ang 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

Mixed: mobile, tablet, at desktop

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

Pag-clear ng column

I- clear ang mga float sa mga partikular na breakpoint para maiwasan ang awkward wrapping na may hindi pantay na content.

.col-xs-6 .col-sm-3
Baguhin ang laki ng iyong viewport o tingnan ito sa iyong telepono para sa isang halimbawa.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, at pull resets

I-reset ang mga offset, push, at pull sa mga partikular na breakpoint.

.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