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 . Eiporavo peteĩ mba’yru ombohováiva, ipypukukue’ỹva apytégui (he’iséva max-widthiñambueha peteĩteĩva punto de ruptura-pe) térã ipypukuha fluido (he’iséva 100%ipypukuha opaite jave).

Umi mbaꞌeryru ikatu ramo jepe oñembohysýi, hetavéva umi diseño noikotevẽi peteĩ mbaꞌeryru oñembohysýiva.

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

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

<div class="container-fluid">
  ...
</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 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:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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.