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-width
peteĩteĩva punto de ruptura ombohováivape.container-fluid
, ha’évawidth: 100%
opa punto de ruptura-pe.container-{breakpoint}
, ha’évawidth: 100%
pe punto de ruptura oje’éva peve
Pe cuadro oĩva iguýpe ohechauka mbaꞌeichaitépa max-width
oñembojoja peteĩteĩva mbaꞌeryru rehegua pe original rehe .container
ha .container-fluid
peteĩ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 .container
clase por defecto haꞌehína peteĩ mbaꞌeryru ombohováiva, ancho fijo, heꞌiséva iñemoambue max-width
peteĩ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-width
s peteĩteĩ umi punto de ruptura yvatevévape g̃uarã. Techapyrã, .container-sm
haꞌehína 100% ipypuku oñepyrũ hag̃ua oñeguahẽ meve punto de sm
ruptura-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-fluid
peteĩ 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 .