Bootstrap 5

Yazılım dünyasının en çok tercih edilip kullanılan ve yaygın olarak geliştiricilerin karşısına çıkan Bootstrap HTML, CSS ve JS ile web üzerinde duyarlı geliştirme, responsive uyumlu tasarımların geliştirilmesi için kullanılan açık kaynak kodlu bir framework’dür. Önceki birçok sürümüyle geliştiricilerin büyük beğenisini toplayan Bootstrap yazılım geliştirme konusunda ilk etapta değerlendirilen teknolojilerden biridir. Bootstrap’ın yararlı olduğu alanlar ise çeşitli bileşenleri, yardımcı programları ve büyük ızgara sistemini sunmasıdır. 

Bootstrap yaratıcıları 2019 yılı sonuna doğru Bootstrap 5 gibi yeni bir projeye imza attı. Twitter tarafından geliştirilen ve modern, duyarlı, dinamik web sitelerinin geliştirilmesine olanak sağlayan Bootstrap 1500’ün üzerinde CSS sınıfına ve kendi JavaScript fonksiyonlarına sahiptir. En popüler arayüz geliştirme teknolojilerinden biri olan Bootstrap’ın 5. versiyonu hakkında çalışmalar sürdürülmektedir.

Bootstrap ile birlikte zamandan tasarruf sağlanarak formlar, butonlar, navigasyon araçları gibi çeşitli arayüz bileşenleri oluşturulur. Yayındaki en güncel Bootstrap sürümü ise 4.5.2’dir. Bootstrap 5 ile gelen yeni özelliklerin detayları şu şekildedir:

JQuery Bağımlılığı Kaldırılıyor

JQuery, genel amaçlara yönelik olarak kullanılabilen bir JS çatısıdır. JQuery kullanarak daha az kod ile HTML etiketlerine daha kolay ulaşım sağlanabilir. Ayrıca tüm tarayıcılarda sorunsuz biçimde çalışabilme, animasyonlar oluştura, kullanıcı ihtiyaçlarına yönelik olarak cevaplar verme gibi birçok işlem de yine jQuery ile birlikte gerçekleştirilebilir.

JQuery, yazılım dünyasında her gün daha çok kullanılmakta olan ancak boyutu büyüyerek hantallaşan bir JavaScript kütüphanesi olmaya devam ediyor. Bu bağlamda Angular, Vue ve React gibi sanal DOM üzerinden çalışmakta olan modern kütüphanelerin kullanılması daha yaygın hale gelmiştir. Bu tür modern kütüphanelerin çıkması jQuery’nin popülerliğini azaltmada en büyük etken olmuştur. Günümüzde ise jQuery daha az kullanılan ve modern JS kütüphaneleri arasında etkisini azaltan bir kütüphanedir.

Bu nedenle Boostrap 5 jQuery bağımlılığını kaldırdı ve her bir bileşeni “vanilla.JS” ile yeniden yazıldı. Böylelikle Bootstrap 5 eskisine göre daha fazla JavaScript framework’ü ile entegre bir şekilde çalışacak hale gelecektir. Boostrap 5 hala jQuery ile kullanılabilir olduğu unutulmamalıdır.

Duyarlı Yazı Tipi Boyutları (Responsive Containers)

Herhangi bir web sitesinin tasarımında birden çok platform üzerinde veya ekran genişliğinde düzgün görünmesi amacıyla çeşitli düzenlemeler gerçekleştirilir. Bootstrap 5 ile RFS motoruyla yazıların boyut ve biçimleri ekran boyutlarına göre otomatik olarak değiştirme özelliği varsayılan biçimde tasarlanmıştır.

RFS reposu doğrultusunda, RFS, yazı tipi boyutlarının ekran genişliğince boyutlandırılması için geliştirilmiş bir boyutlandırma motoru olarak nitelendirilmektedir. Margin, padding, box-shadow veya border-radius gibi birimler ile birlikte herhangi bir CSS özelliği için her değerin yeniden boyutlandırılması için yetenek sunmaktadır.

Internet Explorer 10 ve 11 Desteği Bitiyor

2000’li yılların başında en çok tercih edilen internet tarayıcısı Internet Explorer’di. Zamanla yeni ve modern tarayıcıların çıkması ile birlikte Internet Explorer popülerliğini yitirmiştir. Microsoft dahi daha sonrasında Internet Explorer 10 desteğini kesmiştir. Bu desteğin kesilmesinin ardından Internet Explorer 11 Edge isimli tarayıcıya dönüştürülmüştür.

Internet Explorer birçok CSS kodunu desteklememektedir. Bootstrap 5 ile birlikte de Internet Explorer 10 ve 11 destekleri sona erdirilmiştir. Geliştiricilerin bu noktada herhangi bir sorun yaşamadan projelerini daha küçük boyutlar ile gerçekleştirmesi mümkün olmuştur.

Ölçü Birimi Değişiyor

CSS tarafında elementlerin boyutlarının belirlenmesi için vh, rem, %, em ve pxx gibi birimler kullanılmaktaydı. Sadece DPI yoğunluğuna göre değişebilen piksel, px ekran boyutuna göre ayarlanan bir birimdir. Bootstrap 5 desteği ile birlikte rem olan yazı tiplerinin boyutları piksel olarak değiştirilmiştir. 

Card Desteği Kaldırılıyor

Bootstrap 4 sürümünde card sınıfı kullanılarak diğer card bileşenlerine bağımlı olmaksızın eşit yükseklik ve genişlikte bileşenler oluşturulabiliyordu. 

Bootstrap 5 sürümü ile birlikte yeni ızgara sisteminin daha duyarlı bir kontrol sunması card sisteminin ızgara sistemi ile yaptığı işin daha kolay olmasını sağlamıştır. Bunun neticesinde ise gereksiz görülen card sınıfları ortadan kalkmıştır.

Navbar Düzenlendi

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 Bootstrap 5 ile bu yapı flex olarak değiştirilmiştir. Bununla birlikte gezinti çubuklarında marjinler de kaldırılmış ve dropdown-menu-dark sınıfı ile açılabilir karanlık temalı menüler eklenmiştir.

Yeniden Tasarlanan Form

Bootstrap 4 sürümünde form elemanları Bootstrap temasına ait olan genel stilini almaktdır. .form-control sınıfı içerisindeki form elementleri %100 genişliğe sahip olmakla birlikte form üzerinde tutarlı, düzgün bir kenar boşluğu sağlamak amacıyla .form-group sınıfının kullanılması gerekmektedir.

Bootstrap 5 sürümü ile birlikte .form-group sınıfı kaldırıldı. Bundan böyle form oluşturmak için standart ızgara sisteminin kullanılması yeterli görülecektir. Bu durum da tarayıcılarda daha tutarlı bir biçimde özelleşmiş ekran sağlamasının olmasına yardımcı olacaktır.

Özel SVG Simge Kütüphanesi

Bootstrap 3 sürümüyle birlikte yaklaşık olarak 250 adet simge yer almaktaydı. Bootstrap 4 sürümünde simge kitaplığına 400 simge daha eklemiştir. Bootstrap 5 sürümünde ise 1000 taneden fazla SVG formatına sahip simge mevcuttur. Ayrıca birçok projede font awesome kütüphanesini kullanmak yerine yalnızca Bootstrap kullanarak görsel olarak tatmin edici web siteleri oluşturmak da mümkündür.

Bootstrap 5’in tahmini teslim süresi belli değildir ancak GitHub içerisindeki resmi yayın sayfasından ilerleyişini izleyebilirsiniz.

 .NET Developer – Yazılım ve Veritabanı Uzmanlığı eğitimimizi görüntülemek için tıklayınız…

Güncel eğitim takvimini görüntülemek için tıklayınız…