kesme noktaları

Temel kavramlar

• Kesme noktaları, duyarlı tasarımın yapı taşlarıdır. Düzeninizin belirli bir görünüm penceresine veya cihaz boyutuna ne zaman uyarlanabileceğini kontrol etmek için bunları kullanın.

• CSS'nizi kesme noktasına göre tasarlamak için medya sorgularını kullanın. Medya sorguları, bir dizi tarayıcı ve işletim sistemi parametresine dayalı olarak stilleri koşullu olarak uygulamanıza izin veren bir CSS özelliğidir. En yaygın olarak min-widthmedya sorgularımızda kullanırız.

• Önce mobil, duyarlı tasarım hedeftir. Bootstrap'ın CSS'si, bir düzenin en küçük kesme noktasında çalışmasını sağlamak için minimum düzeyde stil uygulamayı ve ardından bu tasarımı daha büyük cihazlar için ayarlamak için stiller üzerinde katmanlar oluşturmayı amaçlar. Bu, CSS'nizi optimize eder, oluşturma süresini iyileştirir ve ziyaretçileriniz için harika bir deneyim sağlar.

Kullanılabilir kesme noktaları

Bootstrap, duyarlı bir şekilde oluşturmak için bazen ızgara katmanları olarak adlandırılan altı varsayılan kesme noktası içerir. Kaynak Sass dosyalarımızı kullanıyorsanız bu kesme noktaları özelleştirilebilir.

Her kesme noktası, genişlikleri 12'nin katları olan kapları rahatça tutacak şekilde seçildi. Kesme noktaları, aynı zamanda, genel cihaz boyutlarının ve görünüm alanı boyutlarının bir alt kümesini temsil eder; her kullanım durumunu veya cihazı özel olarak hedeflemezler. Bunun yerine, seriler neredeyse her cihaz için üzerine inşa edilecek güçlü ve tutarlı bir temel sağlar.

_variables.scssBu kesme noktaları Sass aracılığıyla özelleştirilebilir; bunları stil sayfamızda bir Sass haritasında bulacaksınız .

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

Sass haritalarımızı ve değişkenlerimizi nasıl değiştireceğimize dair daha fazla bilgi ve örnekler için, lütfen Grid belgelerinin Sass bölümüne bakın .

Medya sorguları

Bootstrap öncelikle mobil olacak şekilde geliştirildiğinden, mizanpajlarımız ve arayüzlerimiz için mantıklı kesme noktaları oluşturmak üzere bir avuç medya sorgusu kullanıyoruz. Bu kesme noktaları çoğunlukla minimum görüntü alanı genişliklerine dayanır ve görüntü alanı değiştikçe öğeleri ölçeklendirmemize izin verir.

Minimum genişlik

Bootstrap, mizanpajımız, ızgara sistemimiz ve bileşenlerimiz için kaynak Sass dosyalarımızda öncelikle aşağıdaki medya sorgu aralıklarını veya kesme noktalarını kullanır.

// 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 karışımları, Sass değişkenlerimizde belirtilen değerleri kullanarak derlenmiş CSS'mizde çeviri yapar. Örneğ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) { ... }

Maksimum genişlik

Zaman zaman diğer yöne giden medya sorguları kullanırız (verilen ekran boyutu veya daha küçük ):

// 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 karışımlar, belirtilen kesme noktalarını alır, .02pxonlardan çıkarır ve bunları max-widthdeğerlerimiz olarak kullanır. Örneğ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

Tek kesme noktası

Minimum ve maksimum kesme noktası genişliklerini kullanarak tek bir ekran boyutu segmentini hedeflemek için medya sorguları ve karışımları da vardır.

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

Örneğin , aşağıdakilerle @include media-breakpoint-only(md) { ... }sonuçlanacaktır:

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

kesme noktaları arasında

Benzer şekilde, medya sorguları birden çok kesme noktası genişliğine yayılabilir:

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

Hangi sonuçlanır:

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