Tembiecharã
Componente ha opción emohenda hag̃ua ne proyecto Bootstrap rehegua, oikehápe umi mba’e’oka envoltura rehegua, peteĩ sistema rejilla ipu’akapáva, peteĩ objeto medios flexibles ha umi clase utilidad ombohováiva.
Mba’yrukuéra
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 |
Tuichaiterei ≥1200px |
|
---|---|---|---|---|---|
.container |
100% rehegua . | 540px rehegua | 720px rehegua | 960px rehegua | 1140px rehegua |
.container-sm |
100% rehegua . | 540px rehegua | 720px rehegua | 960px rehegua | 1140px rehegua |
.container-md |
100% rehegua . | 100% rehegua . | 720px rehegua | 960px rehegua | 1140px rehegua |
.container-lg |
100% rehegua . | 100% rehegua . | 100% rehegua . | 960px rehegua | 1140px rehegua |
.container-xl |
100% rehegua . | 100% rehegua . | 100% rehegua . | 100% rehegua . | 1140px rehegua |
.container-fluid |
100% rehegua . | 100% rehegua . | 100% rehegua . | 100% rehegua . | 100% rehegua . |
Opa mba’e peteĩme
Ñ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>
Hykuévo
Eipuru .container-fluid
peteĩ mbaꞌeryru ipypukukue henyhẽvape g̃uarã, ojepysóva jehechaukaha ipekue tuichakue javeve.
<div class="container-fluid">
...
</div>
Ombohováiva
Umi mba’e’oka ombohováiva ipyahu Bootstrap v4.4-pe. Haꞌekuéra oheja ndéve emombeꞌu peteĩ mboꞌepy 100% ipypukuva oñeguahẽ meve pe punto de ruptura ojeꞌevaꞌekuépe, 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
, ha reheve xl
.
<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>
Umi punto de ruptura ombohováiva
Bootstrap oñembosakoꞌi guive haꞌe hag̃ua móvil raẽ, roipuru peteĩ pokõi porandu medio rehegua romoheñói hag̃ua punto de ruptura sensato ore diseño ha interfaz-kuérape g̃uarã. Koꞌã punto de ruptura oñemopyendave umi jehechaukaha ancho mínimo rehe ha oheja ñandéve ñamombaꞌeguasu umi elemento jehechaukaha iñambuévo.
Bootstrap oipuru tenonderãite ko’ã rango consulta medio rehegua —térã punto de ruptura— ñande archivo Sass fuente-pe ñande diseño, sistema cuadrícula ha componente-kuérape g̃uarã.
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Rohai guive ore CSS fuente Sass-pe, opaite ore consulta medios de comunicación rehegua ojeguereko Sass mixins rupive:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Sapy’ánte jaipuru umi consulta medio rehegua ohóva ambue gotyo (pe pantalla tuichakue oñeme’ẽva térã michĩvéva ):
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
min-
ha max-
prefijo ha jehechaukaha orekóva ancho fraccionario rehe (ikatúva oiko ciertas condiciones-pe umi dispositivo dpi yvateguápe, techapyrãramo) roipurúvo valor orekóva precisión yvatevéva ko’ã ñembojojarãme g̃uarã .
Peteĩ jey, ko’ã consulta medios de comunicación rehegua ojeguereko avei Sass mixins rupive:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Oĩ avei umi consulta ha mixin medio rehegua ojehecha hag̃ua peteĩ segmento pantalla tuichakue rehegua ojeporúvo umi punto de ruptura ancho mínimo ha máximo.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Ko’ã consulta medios de comunicación rehegua ojeguereko avei Sass mixins rupive:
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
Upéicha avei, umi consulta medio rehegua ikatu oñemosarambi heta punto de ruptura ancho:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Pe Sass mixin ojepytaso hag̃ua peteĩchagua pantalla tuichakue rango ha’éta:
@include media-breakpoint-between(md, xl) { ... }
Índice Z rehegua
Heta componente Bootstrap oipuru z-index
, CSS mbaꞌekuaarã oipytyvõva control diseño rehegua omeꞌevo mbohapyha eje oñemohenda hag̃ua contenido. Roipuru peteĩ escala z-índice por defecto Bootstrap-pe ojejapóva ojejapo hag̃ua hekopete capa jeguata, tembipuru’i ha popover, modal ha hetave mba’e.
Ko'ã valor yvatevéva oñepyrü número arbitrario, yvate ha específico suficientemente ikatu haguã idealmente ojehekýi conflicto. Ñaikotevẽ peteĩ conjunto estándar ko’ãvagui ñande componente capa-pegua rupi —tembipururã ñe’ẽmondo, popovers, navbars, dropdowns, modals— ikatu hag̃uáicha ñaime razonablemente consistente umi comportamiento-pe. Ndaipóri mba'érepa ndaikatúikuri roipuru 100
+ térã 500
+.
Ndoromokyre'ÿi personalización ko'ã valor individual; rekambiáramo peteĩva, oiméne tekotevẽ rekambiapaite umíva.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
z-index
Ojeporu hag̃ua umi frontera oñembojoajúva componente ryepýpe (techapyrã, botón ha entrada umi entrada aty’ípe), jaipuru valor dígito peteĩva ijyvatevéva 1
, 2
, ha 3
umi estado por defecto, hover ha activo-pe g̃uarã. Hover/focus/active-pe, jagueru peteĩ elemento particular tenonde gotyo peteĩ z-index
valor yvatevéva reheve ohechauka hag̃ua ifrontera umi elemento hermanokuéra ári.