Bootstrap v5.3.0 Kararlı Sürüm ile Gelen Yenilik

Duygu Bayrakçı Front End Developer

Önyüz Geliştirme

5 dakika okuma süresi

Merhaba Web Geliştiriciler!

Bootstrap'ın son kararlı sürümü olan Bootstrap 5.3.0, birçok heyecan verici yenilik ve özellikle birlikte karşımızda!

Bu güncelleme, web geliştiricilerine daha fazla esneklik ve özelleştirme seçeneği sunarak projelerinizi daha da güçlendirecek. İşte Bootstrap 5.3.0 ile gelen başlıca yenilikler:

Dark Mod Desteği: Bootstrap 5.3.0 ile birlikte, dark mod (gece modu) desteği sunuluyor. Bu, kullanıcıların web sitenizi karanlık bir arayüzde daha rahat kullanmalarını sağlar. Ayrıca, bu modu özelleştirmek için renk modlarına dair esneklik sunar.

<!doctype html>
<html lang="en" data-bs-theme="dark">
 <!-- ... -->
</html>

Bootstrap'ın yeni karanlık modu varsayılan olarak isteğe bağlıdır, yani tüm sayfanın tasarımını değiştirmek için kök öğesine bir data-bs-theme özniteliği eklemeniz gerekecektir.

Daha izole bir karanlık mod gerekiyorsa, aşağıda gösterilen .dropdown gibi bir üst öğede renk modunu da ayarlayabilirsiniz. Bu, yalnızca açılır menüyü ve alt öğelerini etkileyecek, tüm sayfayı etkilemeyecektir.

<div class="dropdown" data-bs-theme="light">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
   Default dropdown
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
   <li><a class="dropdown-item active" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Another action</a></li>
   <li><a class="dropdown-item" href="#">Something else here</a></li>
   <li><hr class="dropdown-divider"></li>
   <li><a class="dropdown-item" href="#">Separated link</a></li>
 </ul>
</div>
<div class="dropdown" data-bs-theme="dark">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
   Dark dropdown
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
   <li><a class="dropdown-item active" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Another action</a></li>
   <li><a class="dropdown-item" href="#">Something else here</a></li>
   <li><hr class="dropdown-divider"></li>
   <li><a class="dropdown-item" href="#">Separated link</a></li>
 </ul>
</div>

Özel Renk Modları Desteği: Bootstrap artık sadece light ve dark temalarla sınırlı değil. Siz kendi özel renk temalarınızı oluşturabilirsiniz. Bu, web projelerinizi tamamen kişiselleştirmeniz için olanak tanır.

Genişletilmiş Renk Paleti: Tema renklerine uyum sağlayabilen yeni bir renk paleti eklenmiştir. Bu, web sitenizin daha çekici ve kullanıcı dostu olmasını sağlar.

Yeni Bağlantı Yardımcıları ve Hizmetleri: Bootstrap 5.3.0 ile birlikte, bağlantılara ikonlar eklemeyi kolaylaştıran yeni hizmetler ve bağlantı stilleri eklenmiştir. Ayrıca, özel odak halkaları eklemek için yeni yardımcılar da mevcuttur.

Yeni Navbar Altlı Çizgi Seçeneği: Aktif olan sayfada altı çizgili bir alt menüye sahip olabilirsiniz. Bu, gezinmeyi daha anlaşılır hale getirir.

Daha Fazla Yardımcı ve Hizmet: Bootstrap 5.3.0 ile birlikte bir dizi yeni hizmet ve yardımcı sınıf eklenmiştir. Ayrıca hata düzeltmeleri de yapılmıştır.

Renk Modu Mixin'i: Dark mod stilleri, yeni color-mode() Sass mixin'i ile yazılır ve oluşturulur. Bu mixin, belirli bir renk modu için stil yazmanıza olanak tanır.

@include color-mode(dark) {
 .element {
   color: var(--bs-primary-text-emphasis);
   background-color: var(--bs-primary-bg-subtle);
 }
}

$color-mode-type: media-query;
@include color-mode(dark) {
 .element {
   color: var(--bs-primary-text-emphasis);
   background-color: var(--bs-primary-bg-subtle);
 }
}

Ayrıca, yeni $color-mode-type Sass değişkeni ile Bootstrap'daki renk modlarının davranışını da değiştirebilirsiniz. Varsayılan değer "data" dır ve Bootstrap'e yukarıda gördüğünüz veri özniteliklerine kapsanan renk modunun stillerini üretmesini söyler. Diğer desteklenen değer ise "media-query" dir ve yerine medya sorgusu seçenekleri oluşturur. Bu, otomatik olarak ışık ve karanlık modları isteyen ve kullanıcı müdahalesi olmadan çalışmasını isteyenler için faydalıdır.

Renk Modu Değişkenleri: Dark mod renkleri, tema renklerinden türetilir, bu da renk modu paletlerini kolayca özelleştirmenizi sağlar.

Bu yeni güncelleme sayesinde, Bootstrap 5.3.0 ile web projelerinizi daha güzel ve işlevsel hale getirebilirsiniz. Dark mod ve özel renk temaları gibi özelliklerle, kullanıcı deneyimini önemli ölçüde geliştirebilirsiniz. Bu güncelleme hakkında daha fazla detayı Bootstrap resmi web sitesi üzerinden inceleyebilirsiniz.