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
.col-xxl-4 nisqa
.col-xxl-4 nisqa
.col-xxl-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 kaqlla columnakuna alternativa

Clases nisqakunata llamk'achispa .row-cols-*, mana sasachakuspalla huk llikata ruwayta atinki, kaqlla columnakunayuq.

.colwawa de .row-cols-md-3
.colwawa de .row-cols-md-3
.colwawa de .row-cols-md-3

Kimsa mana kaqlla columnakuna

Kimsa columnakuna escritoriokunamanta qallarispa chaymanta imaymana anchoyuq hatun mesakunaman escalachiyta tariy. Yuyariy, rejilla columnakuna huk bloque horizontal nisqapaq chunka iskayniyuqkama yapakunan. 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 hap'iy .

.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 escalachiy , huk iskaywan (kikillan anchokunawan) aswan hatun sapaqchasqa ukhupi.

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

.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, kay clase infix mana llamk'achisqachu), 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 md, lg chaymanta xl kaqpaq, md kaqllata riqsichinayki tiyan.

.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-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

Canales

Clases nisqawanqa .gx-*, canales horizontales nisqakunatam allichayta atikunman.

.col.gx-4canales nisqawan
.col.gx-4canales nisqawan
.col.gx-4canales nisqawan
.col.gx-4canales nisqawan
.col.gx-4canales nisqawan
.col.gx-4canales nisqawan

Clases nisqawanmi .gy-*sayaq canales nisqakunata kamachina.

.col.gy-4canales nisqawan
.col.gy-4canales nisqawan
.col.gy-4canales nisqawan
.col.gy-4canales nisqawan
.col.gy-4canales nisqawan
.col.gy-4canales nisqawan

Clases nisqawanqa .g-*iskaynin chiqanpi canales nisqakunatam allichayta atikunman.

.col.g-3canales nisqawan
.col.g-3canales nisqawan
.col.g-3canales nisqawan
.col.g-3canales nisqawan
.col.g-3canales nisqawan
.col.g-3canales nisqawan

Contenedores

Bootstrap v4.4 kaqpi yapasqa clasekuna yapasqa 100% anchoyuq waqaychanakunata saqin huk p'akiykama. v5 musuq pakikuyninta yapan xxl.

.contenedor nisqa
.contenedor-sm
.contenedor-md nisqa
.contenedor-lg nisqa
.contenedor-xl nisqa
.contenedor-xxl
.contenedor-fluido nisqa