Eżempji tal-grilja Bootstrap

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

Ħ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
.kol-4
.kol-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

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
.col-md-4
.col-md-4

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 għal 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-6
.col-md-4

Imħallat: mobbli u desktop

Is-sistema tal-grilja Bootstrap v4 għandha ħames livelli ta’ klassijiet: xs (żgħir żejjed), sm (żgħir), 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 xs u sm, trid tispeċifika xs biss.

.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

Imħallat: mobbli, tablet, u 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