Sistema de rejilla rehegua

Tembiecharã

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ĩ ñemyesakã pypuku mbaꞌeichaitépa oñembyaty pe sistema rejilla rehegua.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Pe techapyrã yvategua omoheñói mbohapy vore ipukukue joja opaite tembipuru ha jehechaukaha rupi oipurúvo ñande clase cuadrícula rehegua oñembohekopyréva. Umi columna oñecentra página-pe túva ndive .container.

Mba’éichapa omba’apo

Oñembyaívo, péina ápe mbaꞌeichaitépa oñembyaty pe sistema red rehegua:

• Ore rejilla oipytyvõ seis punto de ruptura ombohováiva . Umi punto de ruptura oñemopyenda umi min-widthconsulta medios de comunicación rehe, heꞌiséva ohupytyha upe punto de ruptura ha opaite umi oĩva yvate gotyo (techapyrã, .col-sm-4ojeporu sm, md, lg, xl, ha xxl). Kóva heꞌise ikatuha econtrola contenedor ha columna tuichakue ha comportamiento peteĩteĩva punto de ruptura rupive.

• Contenedores centro ha horizontalmente pad nde contenido. Eipuru .containerpeteĩ píxel ipukukue ombohováivape .container-fluidg̃uarã , width: 100%opaite jehechaukaha ha tembipurukuéra rupi g̃uarã, térã peteĩ mbaꞌeryru ombohováivape g̃uarã (techapyrã, .container-md) peteĩ píxel ipekue oñembojoajúvape g̃uarã.

• 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. Kóva paddingoñecontrarresta upéi umi fila orekóva margen negativo ojeasegura hag̃ua umi contenido oĩva nde columna-pe oñemohendaha ojehechaháicha lado izquierdo gotyo. Umi fila oipytyvõ avei umi clase modificador rehegua omoĩ hag̃ua peteĩchaite columna tuichakue ha umi clase canalización rehegua omoambue hag̃ua espaciado nde contenido rehegua.

• Umi columna ha’e increíblemente flexible. Oĩ 12 plantilla vore ojeguerekóva peteĩ vore rehe, ohejáva ndéve emoheñói opaichagua elemento ñembojoaju oñemopyendáva oimeraẽva vore rehe. Umi mboꞌepy vore rehegua ohechauka mboy vore plantilla rehegua oñembohapevaꞌerã (techapyrã, col-4oñembohape irundy). widths oñemohenda porcentaje-pe upéicha akóinte reguereko peteĩchagua tamaño relativo.

• Umi canalización avei ombohovái ha ojepersonaliza. Umi clase canalización rehegua ojeguereko opaite punto de ruptura rupi, opaite tamaño peteĩchagua ore margen ha espaciado acolchado rehegua . Omoambue canalización horizontal orekóva .gx-*clase, canalización vertical orekóva .gy-*, térã opavave canalización orekóva .g-*clase. .g-0ojeguereko avei ojeipe’a haguã umi canalización.

• Sass variable, mapa ha mixin omombarete red. Ndereipuruséiramo umi mbo’esyry cuadrícula rehegua oñembohekopyréva Bootstrap-pe, ikatu reipuru ore cuadrícula ypykue Sass emoheñói hag̃ua nde mba’éva oguerekóva hetave marcado semántico. Avei romoĩ peteĩ CSS mba’ekuaarã jeporupyre reipuru hag̃ua ko’ã Sass mba’e’oka tuichave hag̃ua ndéve g̃uarã.

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 sistema red rehegua ikatu ojeadapta opaite seis punto de ruptura por defecto rupi, ha oimeraẽ punto de ruptura rembohekopyréva. Umi seis nivel cuadrícula por defecto ha’e ko’ãva:

• Extra michĩva (xs) .
• Michĩ (sm) .
• Medio (md) rehegua .
• Tuicha (lg) .
• Tuichaiterei (xl) .
• Extra extra tuicha (xxl) .

Ojeꞌe haguéicha yvateve, peteĩteĩ koꞌã punto de ruptura oguereko imbaꞌeryru tee, clase prefijo ijojahaꞌeỹva ha modificador. Ko’ápe ojehecha mba’éichapa oñemoambue pe cuadrícula ko’ã punto de ruptura rupi:

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

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 rejilla oike seis 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>

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ĩ por defecto ramo umi columna oguerekóvape g̃uarã. Nde ndive .row-cols-autoikatu ome'ê umi columna-pe iancho natural.

Eipuru ko’ã mbo’esyry vore vore rehegua emoheñói pya’e hag̃ua cuadrícula ñemohenda básico térã econtrola hag̃ua ne tarjeta ñemohenda ha embogue oñeikotevẽ jave columna nivel-pe.

<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-auto">
    <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>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

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-3">
      Level 1: .col-sm-3
    </div>
    <div class="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 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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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: 1.5rem !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ã %).