Bootstrap 5 Dersleri: Kesme Noktaları (Breakpoints) – Ders 2

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

Available breakpoints – Kullanılabilir kesme noktaları

Kesme noktası	Sınıf bilgisi	Boyutlar
X-Küçük	Yok	<576 piksel
Küçük	sm	≥576px
Orta	md	≥768px
Büyük	lg	≥992px
Ekstra büyük	xl	≥1200 piksel
Ekstra ekstra büyük	xxl	≥1400 piksel

Her bir kesme noktası, genişliği 12’nin katları olan kapsayıcıları rahatça tutacak şekilde . Kesme noktaları, aynı zamanda yaygın cihaz boyutları ve görüntü 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 güçlü ve tutarlı bir temel sağlar.

Bu kesme noktaları Sass aracılığıyla özelleştirilebilir – bunları _variables.scss stil sayfamızdaki Sass haritasında bulabilirsiniz.

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

Media queries – Medya sorguları

Bootstrap önce mobil olacak şekilde geliştirildiğinden, düzenlerimiz ve arayüzlerimiz için mantıklı kesme noktaları oluşturmak için 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.

Min-width – (Minimum genişlik)

Bootstrap, düzenimiz, ızgara sistemimiz ve bileşenlerimiz için kaynak Sass dosyalarımızda öncelikle aşağıdaki ortam 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 açıklanan değerleri kullanarak derlenmiş CSS’mizde tercüme edilir. Ö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) { ... }

Max-width – Maksimum genişlik

Bazen diğer yöne giden medya sorgularını 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 beyan edilen kesme noktalarını alır, .02px onlardan çıkarır ve bunları max-width değ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

Single breakpoint – 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 @include media-breakpoint-only(md) { … }, sonuç şu şekilde olacaktır:

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

Between breakpoints – 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ç:

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

Kaynak, 1