Bootstrap v5 kararlı sürümü yayınlandı

Yazar : Furkan Toptaş 10 Mayıs 2021 0 Comment

İçindekiler

Bootstrap, HTML, CSS ve JS ile web üzerinde (responsive) duyarlı geliştirme yapmak için yazılım dünyasının en popüler ve en yaygın olarak kullanılan açık kaynak kodlu Front-end (ön uç) framework’üdür. Bootstrap önceki ve güncel sürümleri ile birçok geliştiriciye kolaylıklar sağladı.

Bootstrap ekibi, 2020 Nisan ayında 2020 yılının sonlarına doğru Bootstrap v5 sürümünün beta gibi deneme sürümünün çıkacağını ve bunun üzerinde çalışmalarını başlattıklarını duyurdu. Bu duyurunun sonrasında üç alpha ve üç beta sürümleri yayınlandığı geçtiğimiz güne gelene kadar. En son v5 beta 3 sürümü 23 Mart 2021’de yayınlanmıştı. Geçtiğimiz gün(05.05.2021) Bootstrap ekibi Bootstrap v5 sürümünün resmen kararlı hale geldiğini yani bütün eksiklerinin giderildiğini ve istenen geliştirilmelerin ve testlerin yapılarak artık geliştiricilerin kullanımına rahatlıkla sunduklarını resmen açıkladı. Peki v4’den farkı nedir ? v5 ile ne gibi yeni özellikler geldi ?

Bootstrap v5 ile Gelen Yeni Özellikler

1- Logo Değişikliği

Bootstrap, en büyük değişikliklerden biri olarak paylaştığı değişiklik. Yeniden tasarlanarak eskisine nazaran daha iyi olduğu söylenebilir.

Burada logonun yanı sıra site içeriğinde de düzenlemeye gidilerek gelişmiş gezinme özellikleri eklenmiştir.

2- Bootstrap Simgeleri

Yeni simgeler eklenmiş ve çoğu simgeler tekrardan tasarlanmış. Bu simgelerin tasarımı esnasında “logoyu da değiştirelim demişler” sanırım. Logonun yeniden tasarlanmasında simgelerin yeniden tasarlanmasının payı olduğunu söylemişler.

Yeni simgelerin kullanımı için linkten ulaşabilirsiniz.

3- OffCanvas Bileşeni

Yeni Offcanvas bileşenleri, görünüm penceresinin üstüne, sağına, altına veya soluna yerleştirilebiliyor. Ben bu özelliği pek anlamadım ilk okuduğumda o yüzden denemek istedim. Sayfaya giderek denedim.

Sayfada yer alan kodu kopyalayarak kendimi projemde denedim aşağıdaki görünümü elde ettim. Sizler “Link with href” Butonuna tıklayarak görüntüleyebilirsiniz.

4- Yeni Accordion

Genellikle Sıkça Sorulan Sorulan kısmı için kullandığımız bölümü yenilemişler diyebiliriz. Acoordion bileşenini daha kolay hale getirmişler. Yeni bileşene “flush” özelliği ekleyerek kenarlıklarını kaldırma gibi kontrolleri de eklemişler.

Kullanmak veya denemek için siteyi ziyaret edebilirsiniz.

5- Formlar

Site giriş ekranlarında veya kayıt ol ekranlarında gibi girdi gerektiren bütün formlarda kullanılacak giriş alanlarını form tasarımlarını tek bir çatı altında toplamışlar. Bunun haricinde Form alanlarını güncellemişler. Daha fazla form örneği olduğunu söylemek yanlış olmaz.

Yeni dokümanlar sayfalarının yanı sıra, tüm form kontrolleri yeniden tasarlanmış ve kopyalar kaldırılmış. V4’ten bağımsız olarak kapsamlı bir özel form kontrolleri paketi (kontroller, radyolar, anahtarlar, dosyalar ve daha fazlası) sunulmuştur. Bunların haricinde form düzenini de basitleştirmişler.

6- Checkbox ve Radio Butonlar(Onay Kutuları)

Standartlar üzerine inşa edilerek bütün gereksiz şeyleri kaldırmışlar. Bunun yanı sıra tasarımlarını da elden geçirmişler.

7- Floating Label(Yüzen Etiketler)

Benim giriş araçlarında beğendiğim özelliklerden. Girdilere “Placeholder” yerine bu gibi bileşenler daha iyi oluyor açıklayıcılık açısından. Tasarımları ve kullanımı olarak gayet güzel. Bu alanı geliştirmek istediklerini belirtmişler eğer ki böyle olsa daha iyi olur veya bu da eklensin dediğiniz özellikleri Bootstrap Ekibine iletebilirsiniz.

8- Dosya Girişi

Dosya girişi işlemlerini form-file eklentisinden alarak form-control sınıfına eklemişler. Ek olarak önceden kullandıkları Javascript eklentilerini kaldırmışlar ve sade form-control sınıfına type=”file” ekleyerek istenen görünüm ve işlevselliği alabilirsiniz.

9- RTL Desteği(Right to Left)

Bootstrap’de daha önceden olmayan özellik. Arap alfabesinin sağdan sola olmasından gelmekte. Kullanım detayına sayfadan ulaşabilirsiniz.

10- Yeni Snippet Örnekleri

Boostrap, Example kategorisine de yeni örnek tasarımları eklemeyi ve var olan tasarımları da değiştirmeyi unutmamış.

11-Tarayıcı desteği

Bu güncellemede bir sürü eski tarayıcıyı düşünülmüş ve en büyük değişiklerden birini diyebiliriz:

Microsoft Edge Legacy
Internet Explorer 10 ve 11 sürümüne düştü
Firefox <60 kaldırıldı
Safari <10 versiyonuna düşürüldü
İOS Safari <10 versiyonuna düşürüldü
Chrome <60 versiyonuna düşürüldü
Android <6 versiyonuna düşürüldü

12- Javascript

Çok bahsedilen JavaScript’de en büyük değişiklik jQuery’nin kaldırılması. Bunların haricinde de değişiklikler olmuş:

jQuery yok!
Tüm eklentiler artık ilk argüman olarak bir CSS seçiciyi kabul edebilir.
Popper 2 güncellendi!
Tüm JavaScript eklentileri için veri öznitelikleri artık ad alanlıdır bs. Örneğin, data-toggle yerine data-bs-toggle kullanılıyor.
Popper v2’nin gelişiyle açılır menü, açılır pencere ve araç ipucu yerleşimini elden geçirildi.
Tost konumlandırma da elden geçirildi ve şimdi yeni konum yardımcı programlarımızdan yararlanıyor.
Araç ipuçları ve açılır pencereler için özel sınıfları kullanma yeteneği eklendi.
Bileşenler arasında kodu daha iyi paylaşmak için çeşitli optimizasyonlar yapıldı.
Açılır menüler .dropdown-toggleyerine etkinlikleri yayınlayacak şekilde değiştirildi .dropdown.
Statik yöntemler kaldırıldı. _getInstance() için getInstance() gibi değişiklikler yapıldı.
Yeniden adlandırılmalar yapıldı. popovers ve tooltips içinde WhiteList, allowList olarak değiştirildi.

Üç adet alpha ve üç adet beta sürümünden sonra çoğu şey geliştiriciler için düzenlenmiş. Sadelik ve kolaylığa gidildiğini söylemek mümkün. Bazı yardımcı destekler alırken eski desteklerinden kurtularak daha iyi olduğunu şimdi söyleyebiliriz. Ama şunu söylemek gerekiyor bunlarla yetinmeyerek ilerleyen zaman içinde v5 duyurulmasıyla birlikte v5.1.0 içinde adım attıklarını duyurdular. V5.1.0 için gelecek yeniliklere de şöyle değinecek olursak;

gibi eklentiler ve yeniliklerin geleceğini duyurdu. GitHub adreslerine giderek sizlerde görüşlerinizi belirtebilirsiniz. Mutfağa görüşlerinizi yorum bölümünden yazabilirsiniz. Umarım faydalı olmuştur.

Yazı Kaynağı: Kaynak