Bootstrap grid nhwɛso ahorow

Basic grid layouts a ɛbɛma woahu adansi wɔ Bootstrap grid nhyehyɛe no mu.

Nnua abiɛsa a ɛyɛ pɛ

Nya nkyerɛwde abiɛsa a ne tɛtrɛtɛ yɛ pɛ a efi ase wɔ desktop so na ɛkɔ desktop akɛse so . Wɔ mobile devices, tablets ne ase hɔ no, columns no bɛboaboa ano ankasa.

.kol-md-4 na ɛwɔ hɔ
.kol-md-4 na ɛwɔ hɔ
.kol-md-4 na ɛwɔ hɔ

Adum abiɛsa a ɛnyɛ pɛ

Nya columns abiɛsa a efi ase wɔ desktops na scaling kɔ desktop akɛse a ne tɛtrɛtɛ ahorow so. Kae sɛ, ɛsɛ sɛ grid columns no ka dumien ho ma horizontal block biako. Nea ɛboro saa, na columns fi ase stacking ɛmfa ho viewport.

.col-md-3 na ɛwɔ hɔ
.kol-md-6 na ɛwɔ hɔ
.col-md-3 na ɛwɔ hɔ

Adum abien

Nya nkyerɛwde abien a efi ase wɔ desktop so na ɛkɔ desktop akɛse so .

.kol-md-8 na ɛwɔ hɔ
.kol-md-4 na ɛwɔ hɔ

Ne tɛtrɛtɛ nyinaa, adum biako

Grid adesua biara nni hɔ a ɛho hia ma element ahorow a ɛtrɛw nyinaa.

Nkorabata abien a ɛwɔ nkorabata abien a wɔde ahyɛ mu

Sɛnea nkrataa no kyerɛ no, nesting yɛ mmerɛw —fa nkyerɛwde ahorow a ɛtoatoa so bi hyɛ kɔla bi a ɛwɔ hɔ dedaw mu kɛkɛ. Wei ma wo kɔla mmienu a ɛfiri aseɛ wɔ desktop so na ɛkɔ soro kɔ desktop akɛseɛ so , a mmienu foforɔ (a ne tɛtrɛtɛ yɛ pɛ) wɔ kɔla kɛseɛ no mu.

Wɔ mobile device akɛse, tablets ne ase no, saa columns yi ne wɔn nested columns no bɛboaboa ano.

.kol-md-8 na ɛwɔ hɔ
.kol-md-6 na ɛwɔ hɔ
.kol-md-6 na ɛwɔ hɔ
.kol-md-4 na ɛwɔ hɔ

Afrafra: mobile ne desktop

Bootstrap 3 grid nhyehyɛe no wɔ adesua ahorow anan: xs (fon), sm (tablɛt), md (desktop), ne lg (desktop akɛse). Ɛkame ayɛ sɛ wubetumi de adesua ahorow yi a wɔaka abom biara adi dwuma de ayɛ nhyehyɛe ahorow a ɛyɛ nnam na ɛyɛ mmerɛw kɛse.

Tier biara a ɛwɔ classes no mu no yɛ scales up, a ɛkyerɛ sɛ sɛ woayɛ nhyehyɛe sɛ wobɛhyehyɛ widths koro no ara ama xs ne sm a, nea ehia sɛ wokyerɛ xs nkutoo.

.kol-xs-12 .kol-md-8 na ɛwɔ hɔ
.kol-xs-6 .kol-md-4 na ɛwɔ hɔ
.kol-xs-6 .kol-md-4 na ɛwɔ hɔ
.kol-xs-6 .kol-md-4 na ɛwɔ hɔ
.kol-xs-6 .kol-md-4 na ɛwɔ hɔ
.col-xs-6 na ɛwɔ hɔ
.col-xs-6 na ɛwɔ hɔ

Nea wɔadi afra: mobile, tablet, ne desktop

.kol-xs-12 .kol-sm-6 .kol-lg-8
.kol-xs-6 .kol-lg-4 na ɛwɔ hɔ
.kol-xs-6 .kol-sm-4. Ɔde ne nsa kyerɛɛ ne so
.kol-xs-6 .kol-sm-4. Ɔde ne nsa kyerɛɛ ne so
.kol-xs-6 .kol-sm-4. Ɔde ne nsa kyerɛɛ ne so

Kɔla a wɔde hyɛ mu

Clear floats wɔ breakpoints pɔtee bi na asiw awkward wrapping a uneven content.

.col-xs-6 .col-sm-3
Sesa wo viewport no kɛse anaa hwɛ wɔ wo fon so sɛ nhwɛso.
.kol-xs-6 .kol-sm-3. ​​Ɔde ne nsa kyerɛɛ ne so
.kol-xs-6 .kol-sm-3. ​​Ɔde ne nsa kyerɛɛ ne so
.kol-xs-6 .kol-sm-3. ​​Ɔde ne nsa kyerɛɛ ne so

Offset, pia, ne twe reset ahorow

Reset offsets, pushes, ne twetwe wɔ breakpoints pɔtee bi.

.kol-sm-5 .kol-md-6 na ɛwɔ hɔ
.col-sm-5 .col-sm-offset-2 .kol-md-6 .kol-md-offset-0. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio
.kol-sm-6 .kol-md-5 .kol-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio