Bölümler

Esasy düşünjeler

• Bölüniş nokatlary täsirli dizaýnyň esasy bölekleridir. Düzümiňizi belli bir görnüşe ýa-da enjam ululygyna haçan uýgunlaşdyryp boljakdygyny gözegçilikde saklamak üçin ulanyň.

• CSS-ni kesiş nokady boýunça arhitektura etmek üçin media talaplaryny ulanyň. Mediýa talaplary, brauzer we operasiýa ulgamynyň parametrleri esasynda stilleri şertli ulanmaga mümkinçilik berýän CSS-iň aýratynlygydyr. Köplenç min-widthmetbugat soraglarymyzda ulanýarys.

• Ilki bilen ykjam, täsirli dizaýn maksat. “Bootstrap” -yň CSS-i iň kiçi nokatda ýerleşiş işini ýerine ýetirmek üçin iň az stil ulanmagy, soňra bolsa has uly enjamlar üçin şol dizaýny sazlamak üçin stilleriň gatlaklaryny ulanmagy maksat edinýär. Bu CSS-iňizi optimallaşdyrýar, görkeziş wagtyny gowulandyrýar we gelýänler üçin ajaýyp tejribe berýär.

Elýeterli bölekler

“Bootstrap” jogap bermek üçin alty sany deslapky nokady öz içine alýar, käwagt gözenek derejeleri diýilýär . Çeşme Sass faýllarymyzy ulanýan bolsaňyz, bu bölekler düzülip bilner.

Her kesiş nokady, ini 12 esse köp bolan konteýnerleri rahat saklamak üçin saýlandy. Bölüniş nokatlary umumy enjam ululyklarynyň we görnüş ölçegleriniň bir bölegini hem görkezýär - olar her ulanylyş gabyny ýa-da enjamyny ýörite nyşana almaýarlar. Munuň ýerine, diapazonlar islendik enjamda diýen ýaly gurmak üçin berk we yzygiderli esas döredýär.

Bu bölekler Sass-yň üsti bilen düzülip bilner - olary _variables.scssstil sahypamyzda Sass kartasynda tapyp bilersiňiz.

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

Sass kartalarymyzy we üýtgeýänlerimizi nädip üýtgetmelidigi barada has giňişleýin maglumat we mysallar üçin Grid resminamalarynyň Sass bölümine serediň .

Mediýa soraglary

“Bootstrap” ilki ykjam bolmak üçin işlenip düzülenligi sebäpli , ýerleşişlerimiz we interfeýslerimiz üçin manyly nokatlar döretmek üçin sanlyja media talaplaryny ulanýarys. Bu bölekler, esasan, iň az görnüş giňligine esaslanýar we görnüşiň üýtgemegi bilen elementleri giňeltmäge mümkinçilik berýär.

Min-ini

“Bootstrap”, esasan, ýerleşişimiz, gözenek ulgamymyz we komponentlerimiz üçin Sass faýllarymyzda aşakdaky media talaplarynyň diapazonlaryny ýa-da bölek nokatlaryny ulanýar.

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

Bu Sass garyndylary, Sass üýtgeýjilerimizde yglan edilen bahalary ulanyp, düzülen CSS-de terjime edýär. Mysal üçin:

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

Iň giňligi

Wagtal-wagtal başga tarapa gidýän media talaplaryny ulanýarys (berlen ekranyň ululygy ýa-da kiçi ):

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

Bu garyndylar şol yglan edilen nokatlary alýar, .02pxolardan aýyrýar we max-widthgymmatlyklarymyz hökmünde ulanýar. Mysal üçin:

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

Breeke bölek

Şeýle hem iň az we iň ýokary aralyk giňliklerini ulanyp, ekran ululyklarynyň bir segmentini nyşana almak üçin media soraglary we garyndylar bar.

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

Mysal üçin @include media-breakpoint-only(md) { ... }:

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

Aralyk nokatlaryň arasynda

Edil şonuň ýaly-da, media talaplary birnäçe aralyk giňligini öz içine alyp biler:

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

Netijeler:

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