Mba’yrukuéra

Mba’éichapa omba’apo hikuái

Umi mbaꞌeryru haꞌehína elemento diseño rehegua iñimportantevéva Bootstrap-pe ha oñeikotevẽ ojepuru jave ñande sistema cuadrícula por defecto . Umi mbaꞌeryru ojepuru ojejoko hag̃ua, oñembohyru hag̃ua ha (sapyꞌante) oñecentra hag̃ua umi mbaꞌe oĩva ipype. Umi mbaꞌeryru ikatu ramo jepe oñembohysýi, hetavéva umi diseño noikotevẽi peteĩ mbaꞌeryru oñembohysýiva.

Bootstrap oúva mbohapy mba’yru iñambuéva reheve:

• .container, omoĩva peteĩ max-widthpeteĩteĩva punto de ruptura ombohováivape
• .container-{breakpoint}, ha’éva width: 100%pe punto de ruptura oje’éva peve
• .container-fluid, ha’éva width: 100%opa punto de ruptura-pe

Pe cuadro oĩva iguýpe ohechauka mbaꞌeichaitépa max-widthoñembojoja peteĩteĩva mbaꞌeryru rehegua pe original rehe .containerha .container-fluidpeteĩteĩva punto de ruptura rupi.

Ehecha chupekuéra tembiapohápe ha embojoja ñande Rejilla techapyrãme .

Contenedor por defecto rehegua

Ñande .containerclase por defecto haꞌehína peteĩ mbaꞌeryru ombohováiva, ancho fijo, heꞌiséva iñemoambue max-widthpeteĩteĩva punto de ruptura-pe.

<div class="container">
  <!-- Content here -->
</div>

Umi mba’yru ombohováiva

Umi mbaꞌeryru ombohováiva oheja ndéve emombeꞌu hag̃ua peteĩ mboꞌepy 100% ipypuku oñeguahẽ meve pe punto de ruptura ojeꞌevaꞌekue, upéi ñamoĩ max-widths peteĩteĩ umi punto de ruptura yvatevévape g̃uarã. Techapyrã, .container-smhaꞌehína 100% ipypuku oñepyrũ hag̃ua oñeguahẽ meve punto de smruptura-pe, upépe oñembohetavéta md, lg, xl, ha reheve xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Umi mba’yru líquido rehegua

Eipuru .container-fluidpeteĩ mbaꞌeryru ipypukukue henyhẽvape g̃uarã, ojepysóva jehechaukaha ipekue tuichakue javeve.

<div class="container-fluid">
  ...
</div>

Sass rehegua

Ohechaukaháicha yvateve, Bootstrap omoheñói peteĩ serie mboꞌepy mboꞌepyrã oñembohekopyréva nepytyvõ hag̃ua emopuꞌa hag̃ua umi diseño reipotáva. Ikatu emohenda ko’ã mbo’esyry mboajepyréva oñembohekopyréva emoambuévo Sass mapa (ojejuhúva _variables.scss) omombaretéva chupekuéra:

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

Oñemboheko rire Sass, ikatu avei rejapo nde mba’e’oka ore Sass mixin rupive.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Ojeikuaave hag̃ua ha techapyrã mbaꞌeichaitépa oñemoambuekuaa ñande Sass mapa ha mbaꞌekuaarã, ehecha Sass vore Grid kuatiañeꞌepyre .