Eżempji tal-grilja Bootstrap

Taqsim bażiku tal-grilja biex jiffamiljarizzak mal-bini fi ħdan is-sistema tal-grilja Bootstrap.

F'dawn l-eżempji l- .themed-grid-colklassi hija miżjuda mal-kolonni biex iżżid xi tema. Din mhix klassi li hija disponibbli f'Bootstrap awtomatikament.

Ħames gradi tal-grilja

Hemm ħames saffi għas-sistema tal-grilja Bootstrap, waħda għal kull firxa ta 'apparati li nappoġġjaw. Kull saff jibda f'daqs minimu ta' viewport u japplika awtomatikament għall-apparati akbar sakemm ma jingħelbux.

.kol-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tliet kolonni ugwali

Ikseb tliet kolonni ta 'wisa' ugwali li jibdew minn desktops u skala għal desktops kbar . Fuq apparat mobbli, pilloli u taħt, il-kolonni awtomatikament jinstammu.

.col-md-4

Tliet kolonni ugwali alternattiva

Billi tuża l- .row-cols-*klassijiet, tista 'faċilment toħloq grilja b'kolonni ugwali.

.colwild ta .row-cols-md-3

Tliet kolonni mhux ugwali

Ikseb tliet kolonni li jibdew mid-desktops u jaqilgħu għal desktops kbar ta 'diversi wisgħat. Ftakar, il-kolonni tal-grilja għandhom jammontaw sa tnax għal blokka orizzontali waħda. Aktar minn hekk, u l-kolonni jibdew jistivaw irrispettivament mill-viewport.

.col-md-3

.col-md-6

.col-md-3

Żewġ kolonni

Ikseb żewġ kolonni li jibdew minn desktops u skala għal desktops kbar .

.col-md-8

.col-md-4

Wisa' sħiħ, kolonna waħda

L-ebda klassijiet tal-grilja ma huma meħtieġa għal elementi ta 'wisa' sħiħ.

Żewġ kolonni b'żewġ kolonni nested

Skont id-dokumentazzjoni, it-tbejjit huwa faċli—sempliċement poġġi ringiela ta 'kolonni f'kolonna eżistenti. Dan jagħtik żewġ kolonni li jibdew minn fuq id-desktops u jitkabbru għal desktops kbar , b'tnejn oħra (wisgħat ugwali) fil-kolonna l-akbar.

F'daqsijiet ta 'apparat mobbli, pilloli u 'l isfel, dawn il-kolonni u l-kolonni nested tagħhom se jġorru.

.col-md-8

.col-md-6

.col-md-4

Imħallat: mobbli u desktop

Is-sistema tal-grilja Bootstrap v4 għandha ħames saffi ta’ klassijiet: xs (żgħir żejjed, din l-infiss tal-klassi ma tintużax), sm (żgħira), md (medju), lg (kbar), u xl (kbar żejjed). Tista' tuża kważi kull kombinazzjoni ta' dawn il-klassijiet biex toħloq layouts aktar dinamiċi u flessibbli.

Kull saff ta' klassijiet jiżdied, jiġifieri jekk qed tippjana li tistabbilixxi l-istess wisgħat għal md, lg u xl, trid tispeċifika biss md.

.col-md-8

.col-6 .col-md-4

.col-6

Imħallat: mobbli, tablet, u desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Canali

Bil .gx-*-klassijiet, il-kanali orizzontali jistgħu jiġu aġġustati.

.colbil- .gx-4kanali

Uża l- .gy-*klassijiet biex tikkontrolla l-kanali vertikali.

.colbil- .gy-4kanali

Bil .g-*-klassijiet, il-kanali fiż-żewġ direzzjonijiet jistgħu jiġu aġġustati.

.colbil- .g-3kanali

Kontenituri

Klassijiet addizzjonali miżjuda f'Bootstrap v4.4 jippermettu kontenituri li huma wiesgħa 100% sa breakpoint partikolari. v5 iżid xxlbreakpoint ġdid.

.kontenitur

.kontenitur-sm

.container-md

.kontenitur-lg

.kontenitur-xl

.kontenitur-xxl

.kontenitur-fluwidu