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 . Contenedores llamk'achinku hap'inapaq, pad, chaymanta (wakin kuti) chay ukhupi contenidota chawpichaypaq. Waqaychakuna anidado kanman chaypas, aswan layoutkuna mana anidado waqaychanata munanchu.

Bootstrap kimsa chikan waqaychanakunawan hamun:

• .container, mayqinchus max-widthsapa kutichiq p’akiypi a churan
• .container-fluid, chaytaq width: 100%tukuy p’akikuykunapi kachkan
• .container-{breakpoint}, chaymi width: 100%nisqa pakikunankama

Uraypi tabla rikuchin imayna sapa contenedor's max-widthtupachisqa original .containerkaqwan chaymanta .container-fluidsapa p'akiy chimpapi.

Chaykunata ruwaypi qhaway hinaspa tupachiy Rejilla ejemploykupi .

Tukuy imayuq

Ñawpaqmanta .containerclaseyku huk kutichiq, takyasqa-anchoyuq waqaychana, max-widthsapa p'akiypi tikrayninkunata niyta munan.

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

Nuyu

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

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

Kutichiq

Kutichiq waqaychanakuna musuq kanku Bootstrap v4.4 kaqpi. Paykunaqa huk clase 100% ancho kaqta riqsichiyta saqinku chaymanta chay nisqa p'akiy puntoman chayanankama, chaymanta max-widthsapa aswan hatun pakikuypaq s churayku. Ejemplopaq, .container-sm100% anchoyuqmi qallarinanpaq smchayanankama, chaypim escalanqa md, lg, hinaspa 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>

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

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

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

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

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.