Ejemplos de rejilla de bootstrap

Sapsi rejilla churanakuna Bootstrap rejilla sistema ukhupi ruwayta riqsinaykipaq.

Kay ejemplokunapiqa .themed-grid-colclase nisqa columnakunaman yapakun wakin temakuna yapanapaq. Kayqa manam huk clasechu Bootstrap kaqpi ñawpaqmanta ruwasqa.

Pichqa llika patakuna

Bootstrap rejilla sistemaman pichqa patakuna kanku, huk sapa llamkanakuna yanapakuyniykupaq. Sapa pata huk aswan pisi qhaway punku sayaypi qallarikun chaymanta kikinmanta aswan hatun dispositivokunaman ruwan mana llallichisqa kaqtin.

.col-4 nisqa
.col-4 nisqa
.col-4 nisqa
.col-sm-4 nisqa
.col-sm-4 nisqa
.col-sm-4 nisqa
.col-md-4 nisqa
.col-md-4 nisqa
.col-md-4 nisqa
.col-lg-4 nisqa
.col-lg-4 nisqa
.col-lg-4 nisqa
.col-xl-4 nisqa
.col-xl-4 nisqa
.col-xl-4 nisqa

Kimsa kaqlla columnakuna

Kimsa kaqlla anchoyuq sapaqchasqa sapaqchasqakuna llamkanakunamanta qallarispa hatun qillqana wasikunaman hatunyachiyta hapiy . Dispositivos móviles kaqpi, tabletas kaqpi chaymanta uraypi, columnakuna kikillanmanta pilakunqa.

.col-md-4 nisqa
.col-md-4 nisqa
.col-md-4 nisqa

Kimsa mana kaqlla columnakuna

Kimsa columnakuna escritoriokunamanta qallarispa chaymanta imaymana anchoyuq hatun mesakunaman escalachiyta tariy. Yuyariy, rejilla columnakunaqa chunka iskayniyuqkamam yapakunan huk bloque horizontal nisqapaq. Aswan chaymanta, chaymanta columnakuna pilata qallarinku mana ima qhaway punku kaptinpas.

.col-md-3 nisqa
.col-md-6 nisqa
.col-md-3 nisqa

Iskay columnakuna

Iskay sapaqchasqakunata llamk'ana wasikunamanta qallarispa hatun qillqana wasikunaman escalachiyta tariy .

.col-md-8 nisqa
.col-md-4 nisqa

Tukuy ancho, sapalla columna

Mana rejilla clasekuna hunt'a ancho elementokunapaq necesariochu.


Iskay sapaqchasqa sapaqchasqa sapaqchasqa iskay sapaqchasqa

Per documentación kaqpi, nido ruwayqa facilmi —huk kachkaq columna ukhupi huk fila columnakuna churaylla. Kayqa iskay sapaqchasqakunata qusunki mesakunapi qallarispa chaymanta hatun mesakunaman escalacionta , huk iskaywan (kikillan anchokunawan) aswan hatun sapaqchasqa ukhupi.

Dispositivo móvil sayaykunapi, tabletakunapi chaymanta uraypi, kay columnakuna chaymanta anidado columnakuna pilakunqa.

.col-md-8 nisqa
.col-md-6 nisqa
.col-md-6 nisqa
.col-md-4 nisqa

Chaqrusqa: móvil y escritorio

Bootstrap v4 rejilla sistemaqa pichqa pata clasekunayuqmi: xs (yapa uchuy), sm (huch'uy), md (chawpi), lg (hatun), xl (yapa hatun). Yaqa mayqin huñusqa kay clasekunamanta llamk'achiy atikunki aswan kallpasapa chaymanta flexible churanakuna ruwanapaq.

Sapa pata clasekuna escalan, niyta munan sichus planeanki kikin anchokuna churayta xs chaymanta sm kaqpaq, xs kaqllata riqsichinayki tiyan.

.col-12 .col-md-8 nisqa
.col-6 .col-md-4 nisqa
.col-6 .col-md-4 nisqa
.col-6 .col-md-4 nisqa
.col-6 .col-md-4 nisqa
.col-6 nisqa
.col-6 nisqa

Chaqrusqa: móvil, tableta, y escritorio

.col-12 .col-sm-6 .col-lg-8 nisqa
.col-6 .col-lg-4 nisqa
.col-6 .col-sm-4 nisqa
.col-6 .col-sm-4 nisqa
.col-6 .col-sm-4 nisqa