Hatun qhawariy

Componentes chaymanta akllanakuna Bootstrap ruwanayki churanapaq, chaymanta p'istuy waqaychanakuna, huk kallpasapa rejilla sistema, huk flexible mediokuna objeto chaymanta kutichiq yanapakuy clasekuna.

Contenedores

Contenedores nisqaqa Bootstrap kaqpi aswan sapsi churana elemento kanku chaymanta ñawpaqmanta ruwasqa rejilla sistemaykuta llamk'achkaspa mañasqa kanku . Akllay huk kutichiq, takyasqa-anchoyuq waqaychanamanta (niyta munan max-widthsapa p'akiypi tikrakuynin) utaq fluido-ancho (niyta munan 100%ancho tukuy pacha).

Waqaychakuna anidado kanman chaypas, aswan layoutkuna mana anidado waqaychanata munanchu.

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

Huk hunt'asqa anchoyuq waqaychanapaq llamk'achiy .container-fluid, qhaway punkup tukuy anchunta mast'ariq.

<div class="container-fluid">
  ...
</div>

Puntos de rupturas respuestas nisqa

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.

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

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

Sass kaqpi pukyuta CSS nisqayku qillqasqaykumanta, llapa willay mast'ariy tapuyniyku Sass mixins kaqnintakama tiyan:

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

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

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

Huk kutitawan, kay willay mast'ariy tapuykunapas Sass mixins kaqnintakama tarikunku:

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

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

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

Kay willay mast'ariy tapuykunapas Sass mixins kaqnintakama tarikun:

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

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

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

Chay Sass mixin kikin pantalla sayaypa llikanta maskanapaq kayhina kanman:

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

Z-índice nisqa

Askha Bootstrap componentes llamk'achinku z-index, CSS propiedad kaqmanta yanapakun kamachiy churayta huk kimsa kaq eje quspa contenidota allichanapaq. Huk ñawpaqmanta z-index escala Bootstrap kaqpi llamk'achiyku chaymanta ruwasqa allinta qata puriypaq, yanapakuypa yanapakuyninkuna chaymanta popovers, modales chaymanta aswan.

Kay aswan hatun chanikuna huk munasqa yupaymanta qallarinku, hatun chaymanta específico suficiente idealmente mana ch'aqwaykuna kananpaq. Necesitayku huk conjunto estándar kaykunamanta tukuy capas componentesniykupi —hillanakuna, popovers, navbars, dropdowns, modales— chaymanta razonablemente constante kayta atiykuman ruwaykunapi. Manam kanchu imaraykupas mana 100+ utaq 500+ llamk'achiyta atiykumanchu karqan.

Mana kallpachaykuchu kay sapan chanikuna ruwayta; sichus hukninta cambianki chayqa, yaqapaschá llapanta cambianayki kanqa.

$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;

Componentekuna ukhupi t'inkisqa fronterakuna llamk'achinapaq (kayhina, botones chaymanta yaykuna huñukunapi), pisi sapalla yupay z-indexchanikuna 1, kaqmanta llamk'achiyku 2chaymanta 3ñawpaqmanta, hover chaymanta ruwaq estadokuna kaqpaq. Hover/focus/active kaqpi, huk elemento particularta ñawpaqman apamuyku aswan hatun z-indexchaniyuqwan, wawqi elementokuna patapi fronterankuta rikuchinapaq.