Eżempji tal-grilja Bootstrap

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

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

Imħallat: mobbli u desktop

Is-sistema tal-grilja Bootstrap 3 għandha erba 'saffi ta' klassijiet: xs (telefowns), sm (pilloli), md (desktops), u lg (desktops ikbar). 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-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

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

Clearing tal-kolonna

Sufruni ċari f'punti ta' waqfien speċifiċi biex jipprevjenu tgeżwir skomdu b'kontenut irregolari.

.col-xs-6 .col-sm-3 Id-daqs tal-
viewport tiegħek jew iċċekkjaha fuq it-telefon tiegħek għal eżempju.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, imbotta, u iġbed resets

Irrisettja l-offsets, pushes, u pulls fi breakpoints speċifiċi.

.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