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.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Pe techapyrã yvategua omoheñói mbohapy vore ipukukue joja rehegua umi tembipuru michĩ, mbytegua, tuicháva ha tuichaitereíva rehe 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 .containerpeteĩ píxel ipukukue ombohováivape .container-fluidg̃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éva paddingoñ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ã umi columna ryepýpe ha umi columna añoite ikatu haꞌe umi fila raꞌy pyaꞌete.
• Gracias a flexbox, umi columna cuadrícula rehegua ndorekóiva peteĩ especificado widthoñemohendavaꞌerã ijeheguiete umi columna ancho joja ramo. Techapyrã, irundy instancia de .col-smoguerekóta ijeheguiete 25% ipypuku pe punto de ruptura michĩvagui ha yvate gotyo. Ehecha pe vore umi columna 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 ohasáva, ikatu reipuru .col-4.
• Umi columna widths oñemohenda porcentaje-pe, upévare akóinte ha e fluido ha tuichakue relativo elemento túva rehe.
• Umi columna oguereko horizontal paddingomoheñói hag̃ua umi canalización columna peteĩteĩva apytépe, jepémo upéicha, ikatu eipeꞌa umi marginfila-gui ha paddingumi columna-gui orekóva .no-gutterson 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-4ojeporu umi dispositivo michĩva, mediano, tuicháva ha extra tuichávape, ha katu ndahaꞌei peteĩha xspunto 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 ems térã rems oñemboheko hag̃ua hetavéva tuichakue, pxs 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.

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

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Heta línea ipukukue joja

Ejapo umi vore ipukukue joja rehegua oñemosarambíva heta línea rehe emoinge rupi peteĩ .w-100reipotápe umi vore oñembojaꞌo peteĩ línea pyahúpe. Ejapo umi pausa ombohováiva embojehe’ávo .w-100algunos utilidades jehechaukarã ombohováiva ndive .

Oĩkuri peteĩ Safari flexbox mba’e’oka ojokóva kóva omba’apo hag̃ua peteĩ flex-basisté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.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

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.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contenido de ancho variable rehegua

Eipuru col-{breakpoint}-automboꞌepykuéra embotuichave hag̃ua umi columna oñemopyendáva ipypegua ancho natural rehe.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

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

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

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

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

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.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

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 .rowha umi utilidad acolchado rehegua ojoajúva .cols rehe. Pe .containertérã .container-fluidtú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 .colacolchado ndive .px-lg-5, rocontrarresta upéva ndive .mx-lg-n5pe túva rehe .rowha upéi romohenda pe .containerenvoltura reheve .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

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.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ikatu avei reipuru pe Sass mixin omoirûva, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

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-heightojehechaukaháicha koꞌape. Ehecha Flexbugs #3 reikuaave hag̃ua.

Alineación vertical rehegua

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alineación horizontal rehegua

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

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 margins negativo opaite columna mitãnguéra pya .rowegui 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 selector 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 .containertérã .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

En la práctica, péina ojehecha mba'éichapa ojehecha. Eñamindu’u ikatuha eipuru meme kóva opaite ambue clase cuadrícula rehegua oñembohekopyréva ndive (oikehápe columna ancho, niveles ombohováiva, reorden ha hetave mba’e).

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

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.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

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 .rows reheve, ha katu ndahaꞌei opaite método implementación rehegua ikatúva oexplica ko mbaꞌe.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Ikatu avei eipuru ko pausa umi punto de ruptura específico-pe ore utilidad jehechaukarã ombohováiva ndive .

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

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 orderpunto de ruptura por (por ejemplo, .order-1.order-md-2). Oike pytyvõ 1rupive 12opaite po nivel rejilla rehegua rupi.

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Oĩ avei ombohováiva .order-firstha .order-lastclase omoambuéva pe orderpeteĩ elemento rehegua omoĩvo order: -1ha 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.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

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-4oñemomýi .col-md-4irundy vore ári.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

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 .

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilidades de margen rehegua

Pe jegueraha flexbox-pe v4-pe, ikatu eipuru umi utilidad margen rehegua haꞌeháicha .mr-autoembojere umi columna joyke’y rehegua mombyry ojuehegui.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Nidación rehegua

Oñemohenda hag̃ua ne mba’ekuaarã cuadrícula por defecto reheve, emoĩ peteĩ vore pyahu .rowha ñ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).

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

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.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

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

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

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-columnsojepuru ojejapo hag̃ua umi ipekue (por ciento-pe) peteĩteĩva vore peteĩteĩva rehegua $grid-gutter-widthoñemohenda aja ipekue umi canalización columna rehegua.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

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-breakpointsha $container-max-widthspeteĩ mba’e kóichaguápe:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

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ã %).