Ejupi contenido principal-pe Eike docs jeguatahápe
in English

Mba’yrukuéra

Umi mba’e’oka ha’e peteĩ mba’e’oka fundamental Bootstrap rehegua oguerekóva, pad ha omohendava ne mba’ekuaarã peteĩ tembipuru térã jehechaukaha oñeme’ẽva ryepýpe.

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-fluid, ha’éva width: 100%opa punto de ruptura-pe
  • .container-{breakpoint}, ha’éva width: 100%pe punto de ruptura oje’éva peve

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 .

Extra michĩva
<576px
Michĩ
≥576px
Medio
≥768px rehegua
Tuicha
≥992px
X-Tuicha
≥1200px
XX-Tuicha
≥1400px
.container 100% rehegua . 540px rehegua 720px rehegua 960px rehegua 1140px rehegua 1320px rehegua
.container-sm 100% rehegua . 540px rehegua 720px rehegua 960px rehegua 1140px rehegua 1320px rehegua
.container-md 100% rehegua . 100% rehegua . 720px rehegua 960px rehegua 1140px rehegua 1320px rehegua
.container-lg 100% rehegua . 100% rehegua . 100% rehegua . 960px rehegua 1140px rehegua 1320px rehegua
.container-xl 100% rehegua . 100% rehegua . 100% rehegua . 100% rehegua . 1140px rehegua 1320px rehegua
.container-xxl 100% rehegua . 100% rehegua . 100% rehegua . 100% rehegua . 100% rehegua . 1320px rehegua
.container-fluid 100% rehegua . 100% rehegua . 100% rehegua . 100% rehegua . 100% rehegua . 100% rehegua .

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 .