Umi punto de ruptura rehegua

Umi concepto central rehegua

• Umi punto de ruptura ha’e umi bloque de construcción diseño ombohováiva rehegua. Eipuru umíva econtrola hag̃ua araka’épa ikatu oñemboheko ne diseño peteĩ jehechaukaha térã tembipuru tuichakue particular-pe.

• Eipuru ñeporandu medio rehegua emohenda hag̃ua ne CSS punto de ruptura rupive. Umi consulta medio rehegua haꞌehína peteĩ mbaꞌekuaarã CSS rehegua ohejáva ndéve eipuru condicionalmente umi estilo oñemopyendáva peteĩ conjunto de parámetros navegador ha sistema operativo rehe. Roipuruvéva min-widthore consulta medios de comunicación-pe.

• Móvil primero, diseño respuesta ha'e pe meta. Bootstrap CSS oguereko hembipotápe oipuru estilo mínimo desnudo ojapo hag̃ua peteĩ diseño ombaꞌapo hag̃ua punto de ruptura michĩvévape, ha upéi capas estilo-kuéra rehe omohenda hag̃ua upe diseño umi tembipuru tuichavévape g̃uarã. Kóva omoporãve ne CSS, omoporãve ñembohasa aravo ha ome’ẽ peteĩ jeiko porãite ne kundahárape g̃uarã.

Umi punto de ruptura ojeguerekóva

Bootstrap oguereko seis punto de ruptura por defecto, sapy’ánte oñembohérava niveles de rejilla , oñemopu’ã hag̃ua ombohovái hag̃ua. Ko’ã punto de ruptura ikatu oñemboheko reiporúramo ore rembiapokue Sass ypykue.

Káda punto de ruptura ojeporavo ojejoko hag̃ua cómodamente umi mbaꞌeryru ipypukuvéva haꞌeva múltiplo 12. Umi punto de ruptura haꞌe avei representante peteĩ subconjunto dispositivo tuichakue común ha umi dimensión port de vista rehegua—ndojepytasói específicamente opaite káso térã dispositivo jepuru rehegua. Upéva rangue, umi gama ome’ẽ peteĩ pyenda mbarete ha constante oñemopu’ã haĝua haimete oimeraẽ dispositivo-pe ĝuarã.

Ko’ã punto de ruptura ha’e personalizable Sass rupive—rejuhúta peteĩ mapa Sass-pe ore _variables.scsshoja de estilo-pe.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Ojeikuaave hag̃ua ha techapyrã mbaꞌeichaitépa oñemoambuekuaa ñande Sass mapa ha mbaꞌekuaarã, ehecha Sass vore Grid kuatiañeꞌepyre .

Umi consulta medios de comunicación rehegua

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.

Min-ancho rehegua

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

// Source mixins

// 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// 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;
  }
}

Koꞌã Sass mixin ombohasa ñande CSS oñembohekopyrévape oipurúvo umi valor ojedeclaráva ñande variable Sass-pe. Techapyrã ramo:

// X-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) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-ancho rehegua

Sapy’ánte jaipuru umi consulta medio rehegua ohóva ambue gotyo (pe pantalla tuichakue oñeme’ẽva térã michĩvéva ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Ko a mixin oipyhy umi punto de ruptura ojedeclaráva, oipe .02pxa chuguikuéra ha oipuru ñande max-widthvalor ramo. Techapyrã ramo:

// X-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) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Punto de ruptura peteĩva

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.

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

Techapyrã pe @include media-breakpoint-only(md) { ... }voluntad osẽva : .

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Umi punto de ruptura apytépe

Upéicha avei, umi consulta medio rehegua ikatu oñemosarambi heta punto de ruptura ancho:

@include media-breakpoint-between(md, xl) { ... }

Upévagui osẽ:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }