Sistema de rejilla rehegua
Eipuru ore rejilla flexbox móvil-primero ipuꞌakapáva emopuꞌa hag̃ua diseño opaichagua forma ha tuichakue peteĩ sistema doce columna rehegua rupive, po nivel ombohováiva por defecto, variable ha mixin Sass rehegua, ha docena clase ojedefinivaꞌekue.
Mba’éichapa omba’apo
Bootstrap sistema cuadrícula rehegua oipuru peteĩ serie mbaꞌeryru, vore ha vore oñemohenda ha oñemohenda hag̃ua contenido. Oñemopu'ã flexbox ndive ha ombohováimbaite. Aguĩve oĩ peteĩ techapyrã ha peteĩ jesareko pypuku mbaꞌeichaitépa oñembyaty pe cuadrícula.
¿Ipyahu térã ndereikuaái flexbox-pe? Emoñe’ẽ ko CSS Tricks flexbox ñe’ẽmondo tenondegua, terminología, ñe’ẽmondo ha código pehẽngue rehegua.
Pe techapyrã yvategua omoheñói mbohapy vore ipukukue joja rehegua umi tembipuru michĩva, mbytegua, tuicháva ha tuichaitereívape oipurúvo ñande clase cuadrícula rehegua ojedefinivaꞌekue. Umi columna oñecentra página-pe túva ndive .container
.
Oñembyaívo, péina ápe mba'éichapa omba'apo:
- Umi mba’yru ome’ẽ peteĩ medio oñecentra ha oñembojehe’a hag̃ua horizontalmente nde sitio contenido. Eipuru
.container
peteĩ píxel ipukukue ombohováivape.container-fluid
g̃uarã térãwidth: 100%
opaite jehechaukaha ha tembipuru tuichakue rupi. - Umi fila haꞌehína envoltura umi columna-pe g̃uarã. Káda columna oguereko horizontal
padding
(ojeheróva canalización) oñecontrola hagua espacio oîva ijapytépe kuéra. Pévapadding
oñecontrarresta upéi umi fila orekóva margen negativo rehe. Péicha, opaite mba’e oĩva ne vorekuérape oñemboheko ojehechaháicha akatúa gotyo. - Peteĩ cuadrícula ñemohendapyrépe, contenido oñemoĩvaꞌerã columna ryepýpe ha umi columna añoite ikatu haꞌe pyaꞌete umi fila raꞌy.
- Gracias a flexbox, umi columna cuadrícula rehegua ndorekóiva peteĩ especificado
width
oñemohendavaꞌerã ijeheguiete umi columna ancho joja ramo. Techapyrã, irundy instancia de.col-sm
oguerekóta ijeheguiete 25% ipypuku pe punto de ruptura michĩvagui ha yvate gotyo. Ehecha pe sección columnas autodisposición rehegua hetave techapyrã rehegua. - Umi mboꞌepy vore rehegua ohechauka mboy vorepa reipuruséva umi 12 ikatúvagui peteĩ vore rehe. Upéicharõ, reipotáramo mbohapy vore ipukukue joja ipukukue, ikatu reipuru
.col-4
. - Umi columna
width
s oñemohenda porcentaje-pe, upévare akóinte ha e fluido ha tuichakue relativo elemento túva rehe. - Umi columna oguereko horizontal
padding
omoheñói hag̃ua umi canalización columna peteĩteĩva apytépe, jepémo upéicha, ikatu eipeꞌa umimargin
fila-gui hapadding
umi columna-gui orekóva.no-gutters
on the.row
. - Ojejapo hag̃ua pe cuadrícula ombohovái hag̃ua, oĩ po cuadrícula punto de ruptura, peteĩva peteĩteĩva punto de ruptura ombohováivape g̃uarã : opaite punto de ruptura (michĩeterei), michĩva, mediano, tuicháva ha tuichaitereíva.
- Umi punto de ruptura cuadrícula rehegua oñemopyenda umi consulta medios de ancho mínimo rehe, heꞌiséva ojeporuha upe peteĩ punto de ruptura ha opaite oĩva yvate gotyo (techapyrã,
.col-sm-4
ojeporu umi dispositivo michĩva, mediano, tuicháva ha extra tuichávape, ha katu ndahaꞌei peteĩhaxs
punto de ruptura). - Ikatu eipuru umi clase cuadrícula rehegua oñembohekopyréva (haꞌeháicha
.col-4
) térã Sass mixins hetave hag̃ua marcado semántico.
Eikuaa porã umi limitación ha mba’e’oka flexbox jerére , ha’eháicha ndaikatúi ojepuru peteĩva HTML elemento flex mba’e’oka ramo .
Opciones de rejilla rehegua
Bootstrap oipuru ramo jepe em
s térã rem
s oñemboheko hag̃ua hetavéva tuichakue, px
s ojepuru umi punto de ruptura cuadrícula rehegua ha mbaꞌeryru ipekue rehegua. Kóva ojehu pe jehechaukaha ipekue oĩgui píxel-pe ha noñemoambuéi letra tuichakue ndive .
Ehecha mbaꞌeichaitépa ombaꞌapo umi aspecto sistema red Bootstrap rehegua heta tembipuru rupive peteĩ mesa iporãva reheve.
Extra michĩva <576px |
Michĩ ≥576px |
Medio ≥768px rehegua |
Tuicha ≥992px |
Tuichaiterei ≥1200px |
|
---|---|---|---|---|---|
Max contenedor ancho rehegua | Ndaipóri (auto) . | 540px rehegua | 720px rehegua | 960px rehegua | 1140px rehegua |
Clase ñe’ẽpehẽtai | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# de columnas rehegua | 12 rehegua | ||||
Ancho de canalización rehegua | 30px (15px peteĩteĩva peteĩ vore ykére) . | ||||
Anidado rehegua | heẽ | ||||
Pe ordenamiento de columna rehegua | heẽ |
Umi columna autodisposición rehegua
Eipuru umi clase columna específica punto de ruptura rehegua emohenda hag̃ua columna tuichakue ndahasýivape g̃uarã peteĩ clase oñenumeráva explícita ÿre haꞌeháicha .col-sm-6
.
Ijyvate-pypuku
Techapyrã, koꞌape oĩ mokõi cuadrícula ñemohenda ojeporúva opaite tembipuru ha jehechaukaha rehe, guive xs
guive xl
. Emoĩ oimeraẽva papapy mboꞌepy unidad rehegua peteĩteĩva punto de ruptura reikotevẽvape g̃uarã ha opaite vore oguerekóta peteĩchagua ipypuku.
Heta línea ipukukue joja
Ejapo umi vore ipukukue joja rehegua oñemosarambíva heta línea rehe emoinge rupi peteĩ .w-100
reipotápe umi vore oñembojaꞌo peteĩ línea pyahúpe. Ejapo umi pausa ombohováiva embojehe’ávo .w-100
algunos utilidades jehechaukarã ombohováiva ndive .
Oĩkuri peteĩ Safari flexbox mba’e’oka ojokóva kóva omba’apo hag̃ua peteĩ flex-basis
térã hesakãva’ỹre border
. Oĩ tembiaporã ñembohekorã kundahára versión itujavévape g̃uarã, ha katu natekotevẽi oñeikotevẽ ne kundahára renda ndo’áiramo umi versión mba’e’apo’ỹme.
Oñemohenda peteĩ vore ipekue
Auto-disposición umi columna cuadrícula flexbox-pe g̃uarã heꞌise avei ikatuha emohenda peteĩ columna ipekue ha eguereko umi columna joyke’ykuéra ombotuichave ijeheguiete ijerére. Ikatu reipuru umi clase cuadrícula rehegua oñembohekopyréva (ojehechaukaháicha iguýpe), umi mixin cuadrícula rehegua térã umi ancho en línea rehegua. Ñañaminduꞌu ambue vorekuéra ombotuichavetaha noimportái mbaꞌeichaitépa ipukukue pe vore mbytépegua.
Contenido de ancho variable rehegua
Eipuru col-{breakpoint}-auto
mboꞌepykuéra embotuichave hag̃ua umi columna oñemopyendáva ipypegua ancho natural rehe.
Umi clase ombohováiva
Bootstrap cuadrícula oike po nivel clase predefinida omopuꞌa hag̃ua diseño ombohováiva complejo. Emohenda nde columnakuéra tuichakue umi tembipuru michĩvéva, michĩva, mbytegua, tuicháva térã tuichaitereívape rehecháramo jepe iporãha.
Opaite punto de ruptura rehegua
Umi cuadrícula peteĩchaguápe g̃uarã umi tembipuru michĩvéva guive tuichavéva peve, eipuru umi clase .col
ha . .col-*
Emombeꞌu peteĩ mboꞌepy oñembopapapýva reikotevẽ jave peteĩ vore tuichakue particularmente; ndaupéichairamo, peñeñandu líbre pejejagarra hag̃ua .col
.
Apilado a horizontal rehegua
Oipurúvo peteĩ .col-sm-*
clase conjunto, ikatu ojejapo peteĩ sistema cuadrícula básica oñepyrũva apilado ha oiko horizontal punto de ruptura michĩvape ( sm
).
Oñembojehe’a ha oñembojoaju
¿Ndereipotái ne columnakuéra oñeapila simplemente algunos niveles de cuadrícula-pe? Eipuru peteĩ combinación clase iñambuéva peteĩteĩva nivel-pe g̃uarã oñeikotevẽháicha. Ehecha pe techapyrã oĩva ko’ápe reikuaa porãve hag̃ua mba’éichapa omba’apo opa mba’e.
Canales rehegua
Umi canalización ikatu oñemohenda respuesta umi acolchado específico punto de ruptura ha umi clase utilidad margen negativo. Oñemoambue hagua umi canalización petet fila oñeme eva ekuepe, embojoaju petet utilidad margen negativo rehegua pe .row
ha umi utilidad acolchado rehegua ojoajúva .col
s rehe. Pe .container
térã .container-fluid
túva ikatu oikotevẽ oñemboheko avei ani hag̃ua ojedesborda ojeipota’ỹva, ojeporúvo jey utilidad relleno ombojoajúva.
Ko’ápe oĩ peteĩ techapyrã oñemboheko hag̃ua Bootstrap cuadrícula tuicha ( lg
) punto de ruptura-pe ha yvateve. Rombohetave pe .col
acolchado ndive .px-lg-5
, rocontrarresta upéva ndive .mx-lg-n5
pe túva rehe .row
ha upéi romohenda pe .container
envoltura reheve .px-lg-5
.
Umi columna fila rehegua
Eipuru umi .row-cols-*
mbo’esyry ombohováiva emohenda pya’e hag̃ua mboy columnapa ohechauka porãve ne contenido ha diseño. Umi clase normal .col-*
ojeporu ramo jepe umi columna peteĩteĩvape (techapyrã, .col-md-4
), umi clase columna fila rehegua oñemohenda túva .row
ári peteĩ tape mbyky ramo.
Eipuru ko’ã mbo’esyry columna fila rehegua emoheñói pya’e hag̃ua cuadrícula ñemohenda básico térã econtrola hag̃ua ne tarjeta ñemohenda.
Ikatu avei reipuru pe Sass mixin omoirûva, row-cols()
:
Alineación rehegua
Eipuru umi utilidad alineación flexbox rehegua emohenda hag̃ua vertical ha horizontalmente umi columna. Internet Explorer 10-11 ndoipytyvõi alineación vertical umi mbaꞌe flex rehegua pe mbaꞌeryru flex oguerekóramo peteĩ min-height
ojehechaukaháicha koꞌape. Ehecha Flexbugs #3 reikuaave hag̃ua.
Alineación vertical rehegua
Alineación horizontal rehegua
Ndaipóri canalización
Umi canalización oĩva columna apytépe ñande clase de rejilla ojedefinivaꞌekuépe ikatu ojeipeꞌa .no-gutters
. Péicha ojeipe a margin
s negativo opaite columna mitãnguéra pya .row
egui ha horizontalgui .padding
Ko’ápe oĩ código fuente ojejapo hag̃ua ko’ã estilo. Eñamindu’u umi vore ñemboyke oñembohapeha umi vore mitã peteĩhakuérape añoite ha oñembohape atributo jeporavoha rupive . Kóva omoheñóiramo jepe peteĩ selector específicovéva, acolchado columna rehegua ikatu gueteri oñembohekove umi utilidad espaciado rehegua ndive .
¿Reikotevẽ peteĩ diseño borde a borde? Emboguejy pe túva .container
térã .container-fluid
.
En la práctica, péina ojehecha mba'éichapa ojehecha. Eñamindu’u ikatuha eipuru meme kóva opaite ambue mbo’esyry cuadrícula rehegua oñembohekopyréva ndive (oikehápe columna ipekue, nivel ombohováiva, reorden ha hetave mba’e).
Envoltura de columna rehegua
Oñemoĩramo hetave 12 vore peteĩ vore ryepýpe, peteĩteĩva vore extra aty, peteĩ unidad ramo, oñembojere peteĩ línea pyahúre.
9 + 4 = 13 > 12 guive, ko div 4 columna tuichakue rehegua oñembojere petet línea pyahúre petet unidad contigua ramo.
Umi columna oúva upe rire oñemotenonde línea pyahu rupive.
Oñembyai columna rehegua
Ojepeꞌa hag̃ua umi vore peteĩ línea pyahúpe flexbox-pe oikotevẽ peteĩ hack michĩva: emoĩ peteĩ elemento ndive width: 100%
oimehápe rembojereséva ne vore peteĩ línea pyahúpe. Normalmente kóva ojejapo heta .row
s reheve, ha katu ndahaꞌei opaite método implementación rehegua ikatúva oexplica ko mbaꞌe.
Ikatu avei eipuru ko pausa umi punto de ruptura específico-pe ore utilidad jehechaukarã ombohováiva ndive .
Reordenamiento rehegua
Ojerure umi clase
Eipuru .order-
umi clase econtrola hag̃ua pe orden visual nde contenido rehegua. Ko’ã mbo’esyry ombohovái, upévare ikatu emohenda pe order
punto de ruptura por (por ejemplo, .order-1.order-md-2
). Oike pytyvõ 1
rupive 12
opaite po nivel rejilla rehegua rupi.
Oĩ avei ombohováiva .order-first
ha .order-last
clase omoambuéva pe order
peteĩ elemento rehegua omoĩvo order: -1
ha order: 13
( order: $columns + 1
), peteĩteĩ. Ko a clase ikatu avei oñembojehe a umi .order-*
clase oñenumeráva ndive oñeikoteveháicha.
Umi columna de desplazamiento rehegua
Ikatu embojoaju umi columna cuadrícula rehegua mokõi hendáicha: ore .offset-
clase cuadrícula ombohováiva ha ore utilidad margen rehegua . Umi clase cuadrícula rehegua oñembotuichave ojoaju hag̃ua umi columna rehe umi margen katu ideprovechove umi diseño pyaꞌepe g̃uarã oñemohendahápe desplazamiento ipekue.
Umi clase de desplazamiento rehegua
Emoinge umi columna akatúa gotyo eipurúvo umi .offset-md-*
clase. Ko a clase ombohetave margen izquierdo petet columna rehegua *
columna rupive. Techapyrã, .offset-md-4
oñemomýi .col-md-4
irundy vore ári.
Oĩve columna ñembogue umi punto de ruptura ombohováivape, ikatu tekotevẽ remoĩjey umi desplazamiento. Ehecha kóva tembiaporãme cuadrícula techapyrãme .
Utilidades de margen rehegua
Pe jegueraha flexbox-pe v4-pe, ikatu eipuru umi utilidad margen rehegua haꞌeháicha .mr-auto
embojere umi columna joyke’y rehegua mombyry ojuehegui.
Nidación rehegua
Oñemohenda hag̃ua ne mba’ekuaarã cuadrícula por defecto reheve, emoĩ peteĩ vore pyahu .row
ha ñemohenda .col-sm-*
peteĩ vore oĩmava ryepýpe .col-sm-*
. Umi vore oñembohysýiva oguerekovaꞌerã peteĩ vore aty oñembojoapýva 12 térã saꞌivéva peve (natekotevẽi reipuru opaite 12 vore ojeguerekóva).
Sass mixins rehegua
Eipuru jave Bootstrap vore Sass ypykue, oguereko opción eipuru hag̃ua Sass mbaꞌekuaarã ha mixin emoheñói hag̃ua página ñemohenda jeporupyre, semántico ha ombohováiva. Ore mboꞌepy cuadrícula rehegua ojedefinivaꞌekue oipuru koꞌã variable ha mixin peteĩchagua omeꞌe hag̃ua peteĩ suite tuichakue mboꞌepy ojepurukuaa hag̃ua umi diseño ombohovái pyaꞌevape g̃uarã.
Variables rehegua
Umi variable ha mapa ohechakuaa mboy columnapa oguereko, canal ancho ha punto consulta medio rehegua oñepyrũtahápe columna otyryrýva. Koꞌãva roipuru romoheñói hag̃ua umi clase cuadrícula rehegua oñembohekopyréva ojehai vaꞌekue yvateve, avei umi mixin jeporupyre rehegua oñemboguapyvaꞌekue iguýpe.
Mixin-kuéra rehegua
Umi mixin ojepuru ojoajúvo umi variable cuadrícula rehegua ndive omoheñói hag̃ua CSS semántico umi columna cuadrícula rehegua peteĩteĩvape g̃uarã.
Tembiecharã jepuru rehegua
Ikatu emoambue umi mbaꞌekuaarã nde mbaꞌekuaarã tee rehe, térã eipurunte umi mixin imbaꞌekuaarã tee reheve. Ko’ápe oĩ peteĩ techapyrã ojepuru hag̃ua ñembohekorã ñepyrũrã ojejapo hag̃ua peteĩ mokõi vore ñemohenda oguerekóva peteĩ pa’ũ ijapytépe.
Oñemohenda porãvo pe cuadrícula
Oipurúvo ñande variable ha mapa Sass cuadrícula incorporada, ikatu oñembohekopaite umi clase cuadrícula rehegua ojedefinivaꞌekue. Emoambue mboy nivelpa oĩ, umi dimensión consulta medio rehegua ha umi mbaꞌeryru ipekue—upéi embojoaju jey.
Columna ha canalización rehegua
Pe número de columna cuadrícula rehegua ikatu oñemoambue umi variable Sass rupive. $grid-columns
ojepuru ojejapo hag̃ua umi ipekue (por ciento-pe) peteĩteĩva vore peteĩteĩva rehegua $grid-gutter-width
oñemohenda aja ipekue umi canalización columna rehegua.
Niveles de rejilla rehegua
Ojehasávo umi columna-gui voi, ikatu avei emohenda mboýpa oĩ umi nivel cuadrícula rehegua. Reipotáramo irundy nivel de cuadrícula-nte, rembopyahúta pe $grid-breakpoints
ha $container-max-widths
peteĩ mba’e kóichaguápe:
Ejapo jave oimeraẽ ñemoambue Sass mbaꞌekuaarã térã mapa-pe, tekotevẽta eñongatu ne ñemoambue ha embojoaju jey. Péicha jajapóramo osẽta peteĩ conjunto pyahu porãite umi clase cuadrícula rehegua ojedefinivaꞌekue mboyve columna ancho, desplazamiento ha ordenamiento rehegua. Umi utilidad visibilidad ombohováiva oñembopyahúta avei ojepuru hag̃ua umi punto de ruptura personalizada. Ejesareko emohenda hag̃ua umi valor cuadrícula rehegua px
(ndaha’éi rem
, em
, térã %
).