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

Opa mba’e peteĩme

Ñ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>

Hykuévo

Eipuru .container-fluidpeteĩ 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-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, 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ꞌeve umi elemento jehechaukaha oñemoambué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

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-indexOjeporu 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 3umi estado por defecto, hover ha activo-pe g̃uarã. Hover/focus/active-pe, jagueru peteĩ elemento particular tenonde gotyo peteĩ z-indexvalor yvatevéva reheve ohechauka hag̃ua ifrontera umi elemento hermanokuéra ári.