Mga halimbawa ng bootstrap grid
Mga pangunahing layout ng grid para maging pamilyar ka sa pagbuo sa loob ng Bootstrap grid system.
Sa mga halimbawang .themed-grid-col
ito, idinaragdag ang klase sa mga column upang magdagdag ng ilang tema. Ito ay hindi isang klase na available sa Bootstrap bilang default.
Limang grid tier
Mayroong limang tier sa Bootstrap grid system, isa para sa bawat hanay ng mga device na sinusuportahan namin. Magsisimula ang bawat tier sa pinakamababang laki ng viewport at awtomatikong nalalapat sa mas malalaking device maliban kung na-override.
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.
Tatlong pantay na column na alternatibo
Sa pamamagitan ng paggamit ng mga .row-cols-*
klase, madali kang makakagawa ng grid na may pantay na mga column.
.col
anak ng
.row-cols-md-3
.col
anak ng
.row-cols-md-3
.col
anak ng
.row-cols-md-3
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.
Dalawang column
Kumuha ng dalawang column simula sa mga desktop at pag-scale sa malalaking desktop .
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 isang hilera ng mga column sa loob ng isang kasalukuyang 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.
Mixed: mobile at desktop
Ang Bootstrap v4 grid system ay may limang tier ng mga klase: xs (sobrang maliit, hindi ginagamit ang class infix na ito), sm (small), md (medium), lg (malaki), at xl (extra large). 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 mga lapad para sa md, lg at xl, kailangan mo lamang tukuyin ang md.
Mixed: mobile, tablet, at desktop
Mga kanal
Sa .gx-*
mga klase, maaaring ayusin ang mga pahalang na gutter.
.col
may
.gx-4
mga kanal
.col
may
.gx-4
mga kanal
.col
may
.gx-4
mga kanal
.col
may
.gx-4
mga kanal
.col
may
.gx-4
mga kanal
.col
may
.gx-4
mga kanal
Gamitin ang mga .gy-*
klase upang kontrolin ang mga patayong kanal.
.col
may
.gy-4
mga kanal
.col
may
.gy-4
mga kanal
.col
may
.gy-4
mga kanal
.col
may
.gy-4
mga kanal
.col
may
.gy-4
mga kanal
.col
may
.gy-4
mga kanal
Sa .g-*
mga klase, ang mga kanal sa magkabilang direksyon ay maaaring iakma.
.col
may
.g-3
mga kanal
.col
may
.g-3
mga kanal
.col
may
.g-3
mga kanal
.col
may
.g-3
mga kanal
.col
may
.g-3
mga kanal
.col
may
.g-3
mga kanal
Mga lalagyan
Ang mga karagdagang klase na idinagdag sa Bootstrap v4.4 ay nagbibigay-daan sa mga container na 100% ang lapad hanggang sa isang partikular na breakpoint. Nagdagdag ang v5 ng bagong xxl
breakpoint.