Puntos de pausa

Upa yuyaykuna

• Puntos de ruptura nisqakunaqa kutichikuq diseñopa bloques de construcción nisqakunam. Chaykunata llamk'achiy kamachinapaq mayk'aq churasqayki huk qhawaypi utaq dispositivo sayaypi adaptasqa kanman.

• Willayta tapuykunata llamk'achiy CSS kaqniyki p'akiy punto kaqwan arquitecturapaq. Media tapuykuna huk CSS kaqmanta ruwana kanku chaymanta estilokuna condicionalmente ruwayta atikunki huk huñu maskaq chaymanta llamkana sistema parámetros kaqpi. Aswanta llamk'achiyku min-widthwillay mast'ariq tapuyniykupi.

• Móvil ñawpaqta, kutichiq diseño meta kachkan. Bootstrap kaqpa CSS kaqninqa huk churana llamk'ananpaq aswan huch'uy p'akiypi llamk'ananpaq, chaymanta qatakuna estilokunapi chay ruwayta aswan hatun dispositivokunapaq allichaypaq. Kayqa CSS kaqniyki allinchan, ruway pachata allinchan, chaymanta watukuqniykikunapaq huk hatun experienciata qun.

Puntos de ruptura disponibles

Bootstrap suqta ñawpaqmanta p'akisqakunayuq, wakin kuti llika patakuna hina riqsisqa , kutichiypaq ruwanapaq. Kay p'akiykuna ruwasqa kanman sichus pukyuta Sass willañiqiykuta llamk'achkanki.

Sapa p'akiy punto akllasqa karqan sumaq hap'inapaq waqaychanakuna mayqinkunachus anchunku achka 12 kaqmanta kanku.P'akiy puntokuna huk subconjunto común dispositivo sayaykunamanta chaymanta qhawana dimensiones kaqmanta representativos kanku —mana específicamente sapa caso de uso utaq dispositivo kaqmanta mask'ankuchu. Aswanpas, chay rangokuna huk sinchi chaymanta mana chiriyasqa cimientota qun yaqa mayqin dispositivopaqpas ruwanapaq.

Kay pakikuykuna Sass kaqnintakama ruwanapaq kanku—huk Sass mapapi _variables.scssestilo raphiykupi tarinki.

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

Aswan willakuypaq chaymanta ejemplokuna imayna Sass mapayku chaymanta tikraqniyku tikranapaq, ama hina kaspa qhaway Sass t'aqapi Grid qillqapi .

Media tapuykuna

Bootstrap ñawpaqta kuyuchina kananpaq ruwasqa kasqanrayku, huk maki willaykunata tapuykunata llamk'achiyku yuyayniyuq p'akiykunata ruwanapaq churanaykupaq chaymanta interfacesniykupaq. Kay p'akiykuna aswanta aswan pisi qhaway anchokunapi sayasqa kanku chaymanta elementokunata qhaway punku tikrakusqanmanhina hatunyachiyta saqiwanchik.

Min-ancho

Bootstrap ñawpaqta kay qatiq willayni tapuy rangokunata llamk'achin —utaq pakikuna— pukyu Sass willañiqiykupi churanaykupaq, rejilla sistemaykupaq chaymanta componentesniykupaq.

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

Kay Sass mixins huñusqa CSSniykupi tikranku Sass variablesniykupi willasqa chanikunata llamk'achispa. Kay hina:

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

Wakin kuti huk ñanman riq willay mast'ariq tapuykunata llamk'achiyku (qusqa pantalla sayaynin utaq aswan huch'uy ):

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

Kay mixinkuna chay declarasqa breakpoints nisqakunata hap’inku, chaymanta qichunku .02px, chaymanta max-widthvalorniyku hina llamk’achinku. Kay hina:

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

Huklla pakikuy

Hinallataq, medios tapuykuna chaymanta mixins kanku huk sapalla segmento pantalla sayaykunamanta targetpaq aswan pisi chaymanta aswan hatun ruphay punto anchokuna llamk'achispa.

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

Por ejemplo el @include media-breakpoint-only(md) { ... }voluntad resulta en :

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

Puntos de pakikuna chawpipi

Chaynallataq, willay mast'ariy tapuykunaqa achka p'akiy anchokunatam mast'arinman:

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

Chaytaq kaykunapi tukukun:

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