Bootstrap $enable Seçenekleri, --bs CSS Değişkenleri ve RFS Rehberi

Genel seçenekler tablosu

Seçenek değişkenleri scss/_variables.scss dosyasının Options bölümündedir ve diğer bütün değişkenler gibi !default taşır. Değiştirmek için kendi dosyanızda, functions import'undan sonra ve variables import'undan önce yeni değeri yazarsınız. v5.0.2'deki varsayılanlar şöyledir:

Tablodaki açıklamalar resmî Options sayfasından ve kaynaktaki kullanım yerlerinden özetlendi. $enable-smooth-scroll Options tablosunda geçmez, ancak v5.0.2 kaynağında tanımlıdır ve geçiş belgesi bu değişkenin v5'te eklendiğini yazar.

Bayraklar kaynakta nasıl çalışır?

Seçeneklerin etkisini anlamanın en iyi yolu, onları kullanan mixin'lere bakmaktır. Hepsi aynı kalıbı izler: mixin önce bayrağı kontrol eder, bayrak kapalıysa ilgili CSS satırını hiç yazmaz. Örneğin gölge mixin'i şöyle başlar:

// scss/mixins/_box-shadow.scss (v5.0.2, kısaltıldı)
@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    // ... değerleri toplar ve box-shadow yazar
  }
}

Bunun pratik sonucu şudur: $enable-shadows kapalıyken butonlar, form alanları ya da dropdown gibi bileşenlerin @include box-shadow(...) satırları çıktıya hiçbir şey eklemez. Bayrağı açtığınızda bu satırlar gölge yazmaya başlar. Seçenek yalnızca süs amaçlı gölgeleri etkiler; belgenin vurguladığı gibi odak durumundaki gölgeler bayraktan bağımsızdır. Bu ayrım, klavye kullanıcılarının odak göstergesini kaybetmemesi için önemlidir.

Diğer bayraklar da benzerdir. gradient-bg() mixin'i her zaman background-color yazar, $enable-gradients açıksa ek olarak background-image: var(--bs-gradient) ekler. Gradyanın kendisi $gradient değişkenidir ve v5.0.2'de yukarıdan aşağıya yarı saydam beyazdan saydama giden bir linear-gradient olarak tanımlıdır. Bayraktan bağımsız olarak .bg-gradient yardımcı sınıfı her zaman vardır; tek bir öğeye gradyan eklemek istiyorsanız bayrağı açmanıza gerek yoktur. border-radius() mixin'i $enable-rounded, transition() mixin'i $enable-transitions, ok işaretini çizen mixin $enable-caret bayrağına bakar. $enable-button-pointers ise butonlara cursor: pointer yazıp yazmayacağını belirler.

Bootstrap 5.0.2 derlenmiş CSS dosyasında buton temel sınıfı şöyle tanımlıdır; varsayılan bayraklarla gelen köşe yarıçapını, el imlecini ve geçişi aynı kuralda görebilirsiniz:

.btn {
  display: inline-block;
  /* (kısaltıldı) */
  cursor: pointer;
  /* (kısaltıldı) */
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

Negatif margin sınıfları

Boşluk sayfasına göre CSS'te margin negatif olabilir, padding olamaz; Bootstrap negatif margin sınıflarını varsayılan olarak üretmez. Kaynakta $negative-spacers değişkeni $enable-negative-margins kapalıyken null olur ve negatif margin grupları boş kalır. Nitekim stok v5.0.2 derlenmiş CSS dosyasında .mt-n1 diye bir sınıf yoktur. Bayrağı açarsanız sınıflar, boyut numarasının önüne n eklenmiş adla oluşur; belgedeki örneğe göre .mt-n1, .mt-1 sınıfının tersi olarak üst margin'i -0.25rem yapar. Boşluk sınıflarının tamamı margin ve padding yazısında.

@import "../node_modules/bootstrap/scss/functions";

$enable-negative-margins: true;
$enable-shadows: true;
$enable-gradients: true;

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// ... bileşenler, helpers, utilities/api

Hareketi azaltma ve yumuşak kaydırma

Erişilebilirlik sayfası, Bootstrap'in prefers-reduced-motion medya özelliğini desteklediğini anlatır. Kullanıcı işletim sisteminde ya da tarayıcısında hareketin azaltılmasını istediyse, modalın açılıp kapanması ya da carousel kayması gibi CSS geçişlerinin çoğu kapatılır, spinner gibi anlamlı animasyonlar ise yavaşlatılır. Yukarıdaki .btn kuralının altındaki medya sorgusu bunun bir örneğidir ve transition() mixin'i tarafından $enable-reduced-motion açıkken yazılır.

Aynı sayfa, hareket tercihi belirtmemiş kullanıcılarda (prefers-reduced-motion: no-preference) yumuşak kaydırmanın açıldığını söyler. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu kural şöyle tanımlıdır:

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

Sayfa içi bağlantılarda yumuşak kaydırmayı istemiyorsanız $enable-smooth-scroll: false; yazmanız yeterlidir. $enable-reduced-motion değerini kapatmanızı önermeyiz; bu seçenek hareketten rahatsız olan kullanıcıların açık tercihine saygı gösterir. Erişilebilirlik konusunun tamamı erişilebilirlik yazısında.

Izgara, uyarı mesajları ve önek

$enable-grid-classes kapatıldığında .row ve .col-* sınıfları üretilmez; ızgarayı kendi anlamsal sınıflarınızla make-row() ve make-col() mixin'leri üzerinden kurmak istediğinizde işe yarar (grid yazısı). Geçiş belgesi bu bayrağın artık kapsayıcı sınıflarını kapatmadığını yazar; ancak v5.0.2 kaynağındaki _containers.scss dosyası da aynı @if $enable-grid-classes koşuluyla sarılıdır. Bu bayrağı kapatırsanız .container sınıflarının derlenen dosyada olup olmadığını mutlaka kontrol edin.

$enable-deprecation-messages açıkken, v6'da kaldırılması planlanan mixin ya da fonksiyonları kullandığınızda Sass derleme sırasında uyarı yazar. Bu uyarıları kapatmak kısa vadede çıktıyı temizler ama ileride yapacağınız güncellemeyi zorlaştırır; uyarıları okuyup kodu düzeltmek daha sağlıklıdır.

Seçenekler bölümünün hemen altında $variable-prefix değişkeni bulunur ve varsayılan değeri bs-'dir. _root.scss bütün :root değişkenlerini bu önekle üretir. Belgeye göre öneklerin amacı üçüncü taraf CSS ile çakışmayı önlemektir. Öneki değiştirmeden önce bir istisnayı bilin: v5.0.2'de _dropdown.scss içindeki --bs-position değişkeni JavaScript tarafından okunduğu için öneki bilerek sabit yazılmıştır.

CSS değişkenleri: derlemeden kullanılan değerler

CSS değişkenleri belgesi, derlenmiş CSS'te yaklaşık iki düzine özel özellik bulunduğunu ve hepsinin bs- ile başladığını söyler. Değişkenler :root üzerinde tanımlıdır, yani Bootstrap'in CSS'i yüklü olan her sayfada her öğeden okunabilir. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu blok şöyledir:

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  /* (kısaltıldı: purple, pink, red, orange, yellow, green, teal, cyan, white, gray, gray-dark) */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  /* (kısaltıldı: success, info, warning, danger, light) */
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Toplam 24 değişken vardır: $colors map'inden 13 renk, $theme-colors map'inden 8 tema rengi, iki yazı tipi yığını ve gradyan. Belgenin örneği bu değişkenleri kendi kurallarınızda nasıl kullanacağınızı gösterir: sayfanın yazı tipini Bootstrap'in sistem yazı tipi yığınına bağlamak ya da bağlantı rengini temel maviye eşitlemek gibi. var() sözdiziminin kendisi CSS değişkenleri yazısında anlatılıyor.

Bileşen düzeyindeki değişkenler

Belge, CSS değişkenlerinin bileşenler içinde yerel değişken olarak da kullanılmaya başlandığını anlatır. v5.0.2'de bunların başlıcaları şunlardır: .row üzerindeki --bs-gutter-x ve --bs-gutter-y (gutter yazısı), .table üzerindeki --bs-table-bg, --bs-table-striped-bg, --bs-table-hover-bg gibi değişkenler (tablo yazısı), oran yardımcısındaki --bs-aspect-ratio (görsel ve ratio yazısı) ve breadcrumb ayırıcısı için --bs-breadcrumb-divider (sayfalama ve breadcrumb yazısı). Bu değişkenler derlemeden sonra bir bileşeni yerinde ayarlamanıza izin verir. Örneğin derlenmiş CSS'te .row kuralı yatay boşluğu --bs-gutter-x: 1.5rem olarak tanımlar ve margin değerlerini bu değişkenden calc() ile hesaplar.

--bs-primary değiştirmek butonu neden değiştirmez?

CSS değişkenleriyle ilgili en yaygın yanlış beklenti budur. :root üzerinde --bs-primary değerini değiştirdiğinizde .btn-primary rengi değişmez, çünkü Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf değişkeni değil sabit renk kodunu kullanır: background-color: #0d6efd;. Aynı şey .text-primary ve .bg-primary için de geçerlidir. --bs-primary yalnızca sizin var(--bs-primary) ile yazdığınız kurallarda etkilidir. Bileşen renklerini değiştirmenin yolu Sass ile yeniden derlemektir (tema renkleri yazısı). Aşağıdaki örnekte değişken yalnızca kendi sınıfımızı etkiler:

<style>
  :root {
    --bs-primary: #7048e8;
  }
  .vurgu {
    border-left: .25rem solid var(--bs-primary);
    font-family: var(--bs-font-monospace);
  }
</style>
<p class="vurgu ps-3">Bu çizgi yeni değeri kullanır.</p>
<button type="button" class="btn btn-primary">Bu buton yine #0d6efd kalır</button>

Örnek bir ayrıştırıcıyla denetlendi; vurgu dışındaki sınıflar v5.0.2 CSS'inde tanımlıdır. Butonun renginin değişmemesi, derlenmiş .btn-primary kuralındaki sabit renk kodundan kaynaklanır.

RFS: duyarlı yazı boyutu motoru

RFS, Bootstrap ekibinin ayrı bir projesidir; adı Responsive Font Sizes kısaltmasından gelir. Belgeye göre başlangıçta yazı boyutları için yazılmış, bugün margin, padding, border-radius ve hatta box-shadow gibi birimli değerleri de ölçekleyebilir. Mekanizma değeri tarayıcı penceresinin boyutuna göre hesaplar ve rem ile görüntü alanı birimlerini karıştıran calc() ifadelerine derler. Geçiş belgesine göre RFS v5'te varsayılan olarak açıktır; v4'te isteğe bağlıydı.

Etkisini en kolay başlıklarda görürsünüz. Bootstrap 5.0.2 derlenmiş CSS dosyasında h1 şöyle tanımlıdır:

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

Yani dar ekranda başlık boyutu pencere genişliğiyle birlikte büyür, 1200px ve üzerinde ise $h1-font-size değerine ($font-size-base * 2.5, yani 2.5rem) sabitlenir. .fs-1 ile .fs-6 arasındaki yardımcı sınıflar da kaynakta rfs: true seçeneğiyle tanımlıdır ve aynı davranışı gösterir. Ölçeklemeyi yöneten ayarlar scss/vendor/_rfs.scss dosyasındadır; v5.0.2'de $rfs-base-value 1.25rem, $rfs-breakpoint 1200px, $rfs-factor 10 değeriyle gelir. Belgedeki örnekte 1.125rem gibi küçük bir değerin ölçeklenmeden bırakıldığı görülür; taban değerin altındaki boyutlar sabit kalır.

RFS mixin ve fonksiyonları

Kendi kurallarınızda RFS kullanmak için Bootstrap'in Sass dosyalarını içe aktarmanız yeterlidir. rfs() mixin'inin font-size, margin, padding ve bunların yön varyantları için kısayolları vardır; başka bir özelliği ikinci parametre olarak verebilirsiniz. Değerin sonuna !important da ekleyebilirsiniz. Mixin istemiyorsanız iki fonksiyon vardır: rfs-value() px değeri rem'e çevirir, rfs-fluid-value() ölçeklenmesi gerekiyorsa değerin akışkan hâlini döndürür.

.baslik {
  @include font-size(4rem);
}

.kart-govde {
  @include padding(2.5rem);
  @include rfs(1rem, border-radius);
}

.yan-alan {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
  }
}

Bu parça belgedeki örneklerin yapısına göre yazıldı ve burada derlenmedi; derleme çıktısını belgenin RFS sayfasında görebilirsiniz. Genel olarak kapatmak isterseniz $enable-rfs: false; yazmanız yeterlidir. RFS'in ayrıntılı yapılandırması kendi deposunda belgelenmiştir.

Uygulamalı örnek: kurumsal bir yönetim paneli için ayarlar

Düz, sade görünümlü bir yönetim paneli düşünelim: köşeler keskin, geçişler kapalı olsun, gölge istenmesin ama sayfa içi kaydırma yumuşak kalsın. Ayrıca kart başlıklarında negatif margin kullanılacak. Ayar bloğu şöyle olur:

@import "../node_modules/bootstrap/scss/functions";

$enable-rounded: false;
$enable-transitions: false;
$enable-shadows: false;
$enable-negative-margins: true;
$spacer: 1.25rem;

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
// ... ihtiyaç duyulan bileşenler
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

$spacer değişkenini 1.25rem yapmak, $spacers map'i bu değerin katlarıyla tanımlandığı için bütün m-*, p-*, gap-* ölçeğini büyütür; ızgaranın gutter değerleri de varsayılan olarak $gutters: $spacers ile aynı map'i kullandığı için g-* sınıfları da etkilenir. $enable-transitions kapalı olduğunda hareketi azaltma sorguları da yazılmaz, çünkü mixin önce bu bayrağa bakar; geçiş zaten yoktur.

Sık yapılan hatalar

• CDN sürümünde $enable-shadows gibi bir seçeneğin etkisini beklemek: seçenekler yalnızca Sass derlemesinde çalışır.
• .mt-n1 gibi negatif sınıfları bayrağı açmadan kullanmak: stok CSS'te bu sınıflar yoktur.
• Gölgeyi kapatınca odak halkasının da kaybolacağını sanmak: odak gölgeleri bu bayraktan bağımsızdır.
• --bs-primary değiştirerek butonları yeniden renklendirmeye çalışmak: bileşen kuralları sabit renk kodu kullanır.
• $enable-important-utilities değerini kapatıp yardımcı sınıfların bileşen stillerini ezmeye devam edeceğini sanmak: !important olmadan bileşen kuralları kazanabilir.
• Seçenek değerlerini variables import'undan sonra yazmak: bayrak değişir ama ona bağlı değişkenler eski değerle hesaplanmış olur.

Sık Sorulan Sorular

Hangi seçenekler varsayılan olarak kapalı?

v5.0.2'de $enable-shadows, $enable-gradients ve $enable-negative-margins kapalıdır; tablodaki diğer seçenekler açıktır.

CSS değişkenleriyle tema değiştirmek mümkün mü?

Bootstrap 5.0'da sınırlıdır. :root değişkenleri kendi kurallarınızda kullanılabilir, bazı bileşenler (ızgara, tablo, oran yardımcısı, breadcrumb) yerel değişken taşır; ancak buton ve uyarı gibi bileşenlerin renkleri derleme sırasında sabit kodlara dönüşür. Kapsamlı bir renk değişikliği için Sass gerekir.

RFS bazı yazıları neden ölçeklemiyor?

RFS, taban değerin ($rfs-base-value, varsayılan 1.25rem) altındaki boyutları değiştirmeden bırakır ve 1200px kırılma noktasının üzerinde ölçeklemeyi durdurup değeri sabitler. Normal paragraf boyutu bu yüzden ölçeklenmez.

$enable-important-utilities kapatılmalı mı?

Utilities API belgesi !important ekinin yardımcı sınıfların bileşen ve değiştirici sınıfları ezebilmesi için konduğunu söyler. Kapatırsanız d-none gibi bir sınıfın bir bileşenin kendi display kuralını ezeceğinin garantisi kalmaz. Belirli bir gerekçeniz yoksa varsayılanda bırakın.

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 · Sass ile özelleştirme · Tema renkleri · Utilities API · Erişilebilirlik · CSS değişkenleri ve var()