Sales2 min read378 words

Bootstrap 5 ile Gelen Özellikler ve Yenilikler

Emir Eskici

PlusClouds Author

Cloud & SaaS

Bootstrap 5 ile Gelen Özellikler

Kısaca Bootstrap nedir?

Bootstrap, en çok kullanılan açık kaynak kodlu tasarım araçlarından bir tanesidir, masaüstü bilgisayarlarınız, cep telefonunuz ya da tabletiniz için kullanılan cihaz boyutuyla orantılı olarak istediğiniz temaya uygun tasarımlar yapabildiğimiz ücretsiz bir CSS framework’udur. Uzun süre Bootstrap 4 Sürümü ile tasarımlarımıza devam ettik ama sürekli yenilenen ve güncellenen bilişim ve teknoloji alanında Bootstrap’da payını aldı ve beklenen yeni sürüm güncellemesi geldi artık Bootstrap V5 kullanıma hazırdı.

Bootstrap V5 Sürümü ile Neler Yenilendi ve Değişti ?

Jquery Bağımlılığı Kaldırıldı

Jquery bildiğiniz gibi oldukça işimizi kolaylaştıran bir JavaScript kütüphanesidir her tarayıcıda çalışma özelliğinede sahiptir. Ama bu özellikler artık Jquery’e ağır gelmeye ve kütüphaneyi yavaşlatmaya başladı.
Belkide bu yüzden Bootstrap ekibi artık Jquery yerine Vanilla.js ve JavaScript(pure) kullanmayı tercih ettiler.

Breakpoint Boyut Özellliği

Bildiğiniz gibi sm, md, lg, xl gibi classlar kullanılıyordu, ancak artık xxl class gelmesi ile birlikte “≥1400px” yani 1400px ve üzeri boyutlarda extra bir media query belirtilmesine gerek kalmadı(bknz.)

Description

Yenilenen Renk Paleti

Yenilenen renk paleti ile artık daha fazla CSS kodları yazmamıza gerek kalmadan temel renklerin diğer tonlarınada erişebiliyoruz.

Description

Card Class’ı ve Desteği Kaldırıldı

Eski sürümde card özellikleri ve card bileşenlerini rahat bir şekilde kullanabiliyorduk ama gelen V5 sürümü ile yeni ızgara sistemi daha duyarlı bir kontrol sunmasından dolayı card classları kaldırıldı

Navbar Düzeltme ve Yenilikleri

Bootstrap için navbar bileşeni çok önemlidir. Her zaman için kullanılan navbar geliştiriciler için de fazlasıyla yararlıdır. Bootstrap 4 sürümünde varsayılan olarak inline–block yapısı kullanılmaktadır. Ancak
V5 ile bu yapı flex olarak değiştirilmiştir. Bununla birlikte gezinti çubuklarında margin de kaldırılmış ve dropdown-menu-dark sınıfı ile açılabilir karanlık temalı menüler eklendi.

SVG Kütüphanesi Yenilendi

Her sürümde SVG kütüphanesin yeni simgeler ekleniyordu ve bu sürümde de yeni simge eklendi ve 1000 taneden fazla SVG formatında simgeler eklendi. Bu nedenle font-awesome kütüphanesini kullanımı azaltmış oldu.

Internet Explorer Destegi Kesildi

Internet Explorer, JavaScript ES6 desteklememesi ve bir çok CSS özelliklerini karşı cevapsız kalması bir çok geliştiriciyi zor duruma sokmakta. Postcss, Babel, Autoprefixer ile bir nebze olsun gerçek tasarıma yakın çıktılar elde edebiliyorduk fakat yine de hep bir şeyler eksik kalıyordu. Kullanılmaması ve yetersiz kalmasından dolayı Internet Explorer desteği kaldırıldı.

Ve Son…

Bootstrap’ın yenilen sürümü hakkında değişen özelliklerini sizlere aktarmaya çalıştım umarım faydalı olmuştur.
Gelecek Bloglarda görüşmek üzere…

Unutmayın ki teknoloji saatler ileri aktıkça gelişecek güncellenecek ve yenilenecektir, her zaman güncel ve sağlıcakla kalın.

Frequently Asked Questions

Bootstrap 5 ile jQuery bağımlılığı kaldırıldı mı?

Evet, Bootstrap 5 jQuery bağımlılığını kaldırdı. Bunun yerine Vanilla.js ve JavaScript(pure) kullanımı tercih ediliyor.

Breakpoint boyut özelliklerinde hangi değişiklikler yapıldı?

XXL sınıfı geldi ve ≥1400px ve üzeri için ekstra bir medya sorgusuna gerek kalmadı. Böylece bu boyutta ayrı bir sorgu yazmaya ihtiyaç kalmıyor.

Card sınıfı kaldırıldı mı ve neden?

Evet Card sınıfı kaldırıldı. Yeni ızgara sistemi daha duyarlı bir kontrol sunduğu için card özellikleri artık kullanılamıyor.

Navbar'da hangi yenilikler geldi?

Navbar için V5 ile yapı flex olarak değiştirilmiştir; inline–block kullanımı bırakıldı. Ayrıca gezinti çubuklarında margin kaldırıldı ve dropdown-menu-dark sınıfı ile karanlık temalı menüler eklendi.

SVG kütüphanesi nasıl değişti?

SVG kütüphanesi yenilendi ve 1000'den fazla SVG simge eklendi. Bu nedenle font-awesome kullanımını azaltmış oldu.

Internet Explorer desteği neden kesildi?

Internet Explorer desteği, ES6 desteği ve çok sayıda CSS özelliğini karşılayamaması nedeniyle kaldırıldı. Postcss, Babel, Autoprefixer ile gerçek tasarıma yakın çıktılar elde edilmeye çalışılsa da yeterli olmadı.

Renk paleti nasıl değişti ve bu ne anlama geliyor?

Yenilenen renk paleti ile temel renklerin diğer tonlarına erişmek artık daha kolay. Bu sayede ekstra CSS yazmadan farklı renk varyasyonları kullanabiliyoruz.

Bootstrap 5 ile Gelen Özellikler ve Yenil… | PlusClouds Blog