Bootstrap Breakpoint Rehberi: Altı Kırılma Noktası, Mobile-First ve Sass Mixin'leri

Temel kavramlar

Belgeler kırılma noktalarını duyarlı tasarımın yapı taşları olarak tanımlar: düzeninizin hangi ekran ya da cihaz boyutunda değişeceğini onlarla kontrol edersiniz. CSS'i kırılma noktalarına göre düzenlemenin aracı medya sorgularıdır ve Bootstrap bunlarda çoğunlukla min-width kullanır. Hedef mobil öncelikli tasarımdır: CSS önce en küçük ekranda düzenin çalışması için gereken en az kuralı uygular, ardından daha büyük cihazlar için katman katman stil ekler. Belgelere göre bu yaklaşım CSS'i sadeleştirir ve sayfanın çizilme süresini iyileştirir.

Bu mantığı bir kez kavradığınızda sınıf adlarını okumak kolaylaşır. Önek almayan bir sınıf her genişlikte geçerlidir. Kırılma noktası eki taşıyan bir sınıf ise yalnızca o noktadan itibaren devreye girer ve daha geniş ekranlarda da etkin kalır; ayrıca bir üst kademede başka bir sınıfla ezilmediği sürece. Grid sayfasının verdiği örnekle .col-sm-4; sm, md, lg, xl ve xxl ekranların hepsine uygulanır.

Altı kırılma noktası

Kırılma noktaları, genişliği 12'nin katı olan container'ları rahatça taşıyacak şekilde seçilmiştir. Belgeler bunların her cihazı tek tek hedeflemediğini, yaygın cihaz ve görüntü alanı boyutlarının bir alt kümesini temsil ettiğini ve hemen her cihaz için sağlam bir temel sunduğunu belirtir.

Değerler _variables.scss içindeki $grid-breakpoints map'inden gelir ve kaynak Sass dosyalarıyla çalışıyorsanız değiştirilebilir. Container genişlikleri ayrı bir map olan $container-max-widths içinde tutulur; ayrıntılar container ve container-fluid yazısında. Geçiş belgesine göre xxl kademesi v5'te eklendi, diğer kırılma noktaları v4 ile aynı kaldı.

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

Sınıflarda kırılma noktası kullanımı

Kırılma noktası eki pek çok sınıf ailesinde aynı biçimde yer alır: grid sütunları (col-md-6), satır başına sütun sayısı (row-cols-md-2), kaydırma ve sıralama (offset-md-1, order-md-1), gutter (g-md-3), display (d-md-none), flex (flex-md-row), boşluk (m-md-3), boşluk aralığı (gap-md-3), metin hizalama (text-md-center) ve float (float-md-end). Bileşenlerde de karşınıza çıkar: container-md, navbar-expand-md, sticky-md-top, dropdown-menu-md-end, list-group-horizontal-md ve table-responsive-md.

Her sınıf ailesi duyarlı değildir. Örneğin v5.0.2 derlenmiş CSS dosyasında w-md-50, fs-md-1 ya da position-md-absolute gibi sınıflar yoktur; genişlik, yazı boyutu ve konum yardımcıları kırılma noktası eki almaz. Bir sınıfı kullanmadan önce ilgili belge sayfasında ya da derlenmiş CSS'te duyarlı sürümünün olup olmadığına bakın. Hangi yardımcıların duyarlı üretileceği Utilities API'deki responsive seçeneğiyle belirlenir; konu Utilities API yazısında.

Örnek: telefonda alt alta, tablette iki, masaüstünde üç sütun

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Ürün 1</div>
    <div class="col-12 col-md-6 col-lg-4">Ürün 2</div>
    <div class="col-12 col-md-6 col-lg-4">Ürün 3</div>
  </div>
</div>

Bu ürün listesinde her öğe üç sınıf taşır. 768px altındaki ekranlarda, yani xs ve sm kademelerinde, col-12 geçerlidir, öğeler tam genişlikte alt alta durur. 768px'ten itibaren col-md-6 devreye girer ve iki öğe yan yana gelir; üçüncüsü alt satıra kayar. 992px'ten itibaren col-lg-4 üç öğeyi tek satıra yerleştirir. xl ve xxl için ayrıca sınıf yazmadık, çünkü lg kuralı daha geniş ekranlarda da sürer. Grid sistemi grid sistemi: row ve col yazısında ayrıntılı anlatılıyor.

Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıfların arkasındaki kurallar şöyle tanımlıdır. Önek almayan .d-none medya sorgusu olmadan yazılır, md ekli sınıflar ise min-width: 768px sorgusunun içindedir:

.d-none {
  display: none !important;
}

@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  /* (kısaltıldı) */
  .d-md-block {
    display: block !important;
  }
}

Örnek: yardımcı sınıflarla duyarlı başlık alanı

<header class="d-flex flex-column flex-md-row gap-3 text-center text-md-start">
  <div>Logo</div>
  <nav>Menü bağlantıları</nav>
</header>
<aside class="d-none d-lg-block">Yalnızca 992px ve üstünde görünen yan bilgi</aside>
<p class="d-lg-none">Dar ekranda yan bilgi yerine bu kısa not görünür.</p>

Başlık alanı telefonda dikey bir flex kapsayıcıdır ve ortalanmış metin kullanır; 768px'ten itibaren flex-md-row öğeleri yan yana dizer, text-md-start hizalamayı başa çeker. <aside> öğesi varsayılan olarak gizlidir, d-lg-block onu 992px'ten itibaren gösterir. Altındaki paragraf ise tam tersini yapar: her genişlikte görünür, d-lg-none ile 992px'ten itibaren gizlenir. Gizleme ve gösterme sınıflarının tam tablosu display sınıfları, flex yardımcıları flex, justify-content ve align-items yazısında.

Sass mixin'leri

Kendi bileşenlerinizi yazarken aynı kırılma noktalarını kullanmak için Bootstrap'in Sass mixin'lerinden yararlanırsınız. Bunlar scss/mixins/_breakpoints.scss dosyasında tanımlıdır ve $grid-breakpoints map'ini varsayılan değer olarak kullanır; bu yüzden map'i değiştirdiğinizde mixin'ler de yeni değerlere uyar. Aşağıdaki SCSS parçaları resmî belgelerdeki kullanıma ve customize/sass.md sayfasındaki içe aktarma sırasına göre yazıldı; burada derlenmedi.

media-breakpoint-up ve media-breakpoint-down

media-breakpoint-up(md), içeriğini min-width: 768px sorgusuna koyar; belgelerin önerdiği varsayılan yön budur. media-breakpoint-down(lg) ise verilen kırılma noktasının altını hedefler ve max-width: 991.98px üretir. Mixin'leri bir seçicinin dışında da içinde de kullanabilirsiniz:

// custom.scss
// 1. Önce fonksiyonlar
@import "../node_modules/bootstrap/scss/functions";

// 2. Varsayılan değişken ezmeleri buraya (bu örnekte yok)

// 3. Zorunlu dosyalar
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. İstediğiniz Bootstrap parçaları
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Kendi kodunuz: önce mobil, sonra genişleyen ekranlar
.urun-ozeti {
  display: none;
}
@include media-breakpoint-up(md) {
  .urun-ozeti {
    display: block;
  }
}

.yan-menu {
  // lg altındaki ekranlarda (991.98px ve aşağısı)
  @include media-breakpoint-down(lg) {
    position: static;
  }
}

İlk kural mobile-first deseninin Sass karşılığıdır: varsayılan olarak gizle, md'den itibaren göster. İkinci kural ise yalnızca lg altındaki ekranlarda geçerli olan bir ayardır. Bootstrap'in kendi bileşenlerinde de karmaşıklık gerektirdiğinde max-width sorguları vardır; v5.0.2 derlenmiş CSS dosyasında .table-responsive-md ve .modal-fullscreen-md-down kuralları max-width: 767.98px sorgusunun içindedir.

media-breakpoint-only ve media-breakpoint-between

Tek bir kademeyi hedeflemek için media-breakpoint-only() kullanılır; belgelere göre media-breakpoint-only(md) (min-width: 768px) and (max-width: 991.98px) aralığına karşılık gelir. Birden çok kademeye yayılan bir aralık için media-breakpoint-between() vardır; media-breakpoint-between(md, xl) belgelere göre md başlangıcından xl sonuna, yani (min-width: 768px) and (max-width: 1199.98px) aralığına karşılık gelir.

// Yalnızca md aralığı
@include media-breakpoint-only(md) {
  .kampanya-bandi {
    font-size: $font-size-sm;
  }
}

// md başlangıcından xl sonuna kadar
@include media-breakpoint-between(md, xl) {
  .kampanya-bandi {
    padding: $spacer;
  }
}

Örnekteki $font-size-sm ve $spacer, _variables.scss dosyasındaki hazır değişkenlerdir. Kendi değerlerinizi sabit piksellerle yazmak yerine Bootstrap'in değişkenlerini kullanmak, ölçeği sonradan tek yerden değiştirmenizi sağlar.

Neden .02px çıkarılıyor?

max-width sorgularındaki 575.98px gibi değerler ilk bakışta tuhaf görünür. Belgeler bunu şöyle açıklar: tarayıcılar o dönemde aralık bağlamlı medya sorgularını desteklemiyordu; Bootstrap, min- ve max- öneklerinin sınırlamalarını ve bazı yüksek çözünürlüklü cihazlarda oluşabilen kesirli görüntü alanı genişliklerini aşmak için daha yüksek hassasiyetli değerler kullanır. Böylece 576px tam olarak sm kuralına, 575.98px ise ondan önceki aralığa düşer ve iki kural aynı anda geçerli olmaz.

Kaynak koddaki breakpoint-max() fonksiyonunun yorumu bir ayrıntı daha ekler: 0.01px yerine 0.02px kullanılmasının nedeni Safari'deki bir yuvarlama hatasını aşmaktır.

Kaynak koddan uç durumlar

Mixin'lerin kaynağına bakınca belgelerde kısaca geçen birkaç davranış netleşir. Bunlar özellikle xs ve xxl uçlarında önemlidir:

• media-breakpoint-up(xs) medya sorgusu üretmez. xs'in en küçük değeri 0 olduğu için breakpoint-min() boş döner ve içerik doğrudan, her genişlikte geçerli olarak yazılır.
• media-breakpoint-down(xs) de medya sorgusu üretmez. Belgeler bu kullanıma gerek olmadığını söyler; kaynakta üst sınır hesaplanamadığı için içerik koşulsuz yazılır ve her genişlikte uygulanır, yani "yalnızca çok küçük ekran" anlamına gelmez. Yalnızca 576px altını hedeflemek için media-breakpoint-down(sm) kullanın.
• media-breakpoint-only(xxl) üst sınırı olmadığı için media-breakpoint-up(xxl) gibi davranır; media-breakpoint-only(xs) ise media-breakpoint-down(sm) gibi davranır.
• media-breakpoint-only() içine map'te olmayan bir ad yazarsanız breakpoint-next() fonksiyonu "breakpoint not found" hatası üretir ve derleme durur. media-breakpoint-up() ile -down() ise kaynak koddaki koşullara göre bilinmeyen adda hata vermez, içeriği sorgusuz yazar; bu yüzden bu iki mixin'de ad yazımını kendiniz kontrol edin.
• breakpoint-infix() fonksiyonu xs için boş metin, diğerleri için -sm gibi bir ek döndürür. Önek almayan sınıfların nedeni budur.

Kırılma noktalarını özelleştirmek

Grid sayfası, kademe sayısını ve değerlerini değiştirmenin yolunu gösterir. Yalnızca dört kademe istiyorsanız $grid-breakpoints ve $container-max-widths map'lerini yeniden tanımlarsınız. Değişken ezmeleri, Sass sayfasındaki kurala göre fonksiyonlar içe aktarıldıktan sonra ve kalan dosyalardan önce gelmelidir:

// custom.scss: fonksiyonlardan sonra, variables dosyasından önce
@import "../node_modules/bootstrap/scss/functions";

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// ... kalan Bootstrap parçaları

Değişikliği kaydedip yeniden derlediğinizde sütun genişliği, kaydırma ve sıralama sınıflarının tamamı yeni kademelere göre üretilir; belgelere göre duyarlı görünürlük yardımcıları da güncellenir. Bu örnekte xl ve xxl kalktığı için col-xl-* gibi sınıflar artık derlenmez. Belgeler grid değerlerini rem, em ya da yüzde değil px cinsinden yazmanızı ister. Geçiş belgesi ayrıca v5'te Sass map'lerinin varsayılan birleştirmesinin kaldırıldığını belirtir; bir map'i yeniden tanımladığınızda tüm değerleri yazmanız gerekir. Sass ile özelleştirmenin geneli Sass ile özelleştirme yazısında.

Sık yapılan hatalar

• md'yi "yalnızca tablet" sanmak: col-md-6 768px ve üstündeki tüm ekranlarda geçerlidir; yalnızca bir aralığı hedeflemek için üst kademede başka bir sınıf ekleyin ya da Sass'ta media-breakpoint-only() kullanın.
• xs için sınıf eki yazmak: col-xs-6 v5'te yoktur; en küçük kademe için ek kullanılmaz, col-6 yazılır.
• Viewport meta etiketini unutmak: Etiket yoksa telefon sayfayı masaüstü genişliğinde çizer ve kırılma noktaları beklendiği gibi tetiklenmez.
• v4 mixin parametrelerini olduğu gibi taşımak: media-breakpoint-down() v5'te bir kademe kaydı; aynı sonucu almak için parametreyi bir üst kademeye çekin.
• Her yardımcı sınıfın duyarlı olduğunu varsaymak: w-*, fs-* ve position-* gibi aileler kırılma noktası eki almaz.
• Kırılma noktalarını rem ile tanımlamak: Belgeler grid değerlerinin px olmasını ister.

Sık Sorulan Sorular

Bootstrap'te telefon, tablet ve masaüstü kırılma noktaları kaç piksel?

Bootstrap cihaz adı kullanmaz, genişlik kullanır: sm 576px, md 768px, lg 992px, xl 1200px ve xxl 1400px. 576px altı xs kabul edilir ve sınıf eki almaz. Belgeler bu değerlerin her cihazı hedeflemediğini, yaygın boyutların bir alt kümesini temsil ettiğini belirtir.

Kırılma noktası sınıfları neden min-width ile çalışıyor?

Bootstrap mobile-first geliştirilir: önce küçük ekran için az kural yazılır, ekran büyüdükçe min-width sorgularıyla yeni kurallar eklenir. Bu, üzerine yazma ihtiyacını azaltır.

Sass kullanmadan kırılma noktalarını değiştirebilir miyim?

Derlenmiş CSS'teki sınıflar sabit değerlerle üretilmiştir. Kırılma noktalarını değiştirmek için Sass kaynaklarında $grid-breakpoints map'ini düzenleyip yeniden derlemeniz gerekir.

Kendi CSS'imde aynı değerleri nasıl kullanırım?

Sass kullanıyorsanız media-breakpoint-up() ve diğer mixin'leri kullanın. Düz CSS yazıyorsanız tablodaki değerlerle @media (min-width: 768px) gibi sorgular yazabilirsiniz; ancak kırılma noktalarını sonradan değiştirirseniz bu değerleri elle güncellemeniz gerekir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap container · Bootstrap grid sistemi · Bootstrap display sınıfları · CSS media query sözdizimi