Yılın ilk aylarında Bootstrap 5 Beta olarak yayınlandıktan sonra kısa bir süre önce artık kullanılabilir sürüm olarak yayınlandı. Bootstrap 4 ile 5 arasında belli başlı değişiklikler yapılmış. Bunlardan en çok kullanabilir ve işimize yarayacak olanları sizler için madde madde anlatmaya çalışacağım.
Bootstrap 5 Yenilikler
Öncelikle Bootstrap 5e geçmeden flexbox hakkında bilgi sahibi olmanızı öneririm. Çünkü altyapı olarak daha aktif olarak kullanılmaya başlanmış. Ayrıca flexbox ile fazla kod yazmadan yapmak istediğini zişleri dah akolay halledebilirsiniz.
Kaynak olarak :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Madde halinde incelemeye geçmeden önce kısa bir bilgi daha vermek istiyorum.
- Bootstrap 5 ile artık jquery yerini Vanilla JavaScript alıyor.
- Explorer 10 ve 11′ e destek vermeyecek.
- Navbarda genel bir optimizasyon yapıldı
- Yeni gelen özellikler ile ekstradan yazmak zorunda olduğumuz css kodlarımızda ciddi bir azalma olacak.
1. XXL özelliği
Bildiğiniz üzere sm, md, lg, xl classları sayesinde ekran boyutlarına göre düzenlemeler yapıyorduk. Bunlara ek olarak bootsrap 5 ile
XXL sınıfı geldi. Bu sınıfın özelliği ise;
≥1400px 1400px ve üzerindeki boyutlarda kullanılması.
Bu özellik bence mantıklı bir ekleme olmuş. Laptop ile masaüstü pc ler (artık yüksek inc monitörlerin sayısının arttığını düşünürsek) arasında bir ayırım için exstra kod yazmaya gerek kalmayacaktır.
2. g gx gy sınıfları
Büyük bir eksiği gideren bir ekleme olduğunu düşünüyorum. Nedir bu g gx gy sınıfları;
kısa bir örnekler açıklamak daha anlaşılır olacaktır.
Örneğin 2 tane yan yana col-6 sınıfınız var bunların arasında bildiğiniz üzere her 15px den toplam 30px boşluk kalıyor. Bazen bu boşluklar fazla olduğu için padding leri ile oynamak zorunda kalınıyordu. Artık bu sıkıntı giderilmiş oldu.
Kullanımı;
0: 0
1: 0.25rem
2: 0.5rem
3: 1rem
4: 1.5rem
5: 3rem
g0/5 : x ve y ekseninde boşluk verebiliyorsunuz.
gx-0/5 : x ekseninde vereceğiniz boşluğu seçiyorsunuz. 0 ile 5 arasında değer alıyor.
gy-0/5 : y ekseninde vereceğiniz boşluğu seçiyorsunuz. 0 ile 5 arasında değer alıyor.
3. Float start / end
Bootstrap 4de float-left , float-right sınıfları vardı. Bootsrap 5 ile artık
float-start ve float-end olarak değişti. Kullanım mantığı aynı.
Sınıflar;
.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none
4. Yeni Renk Sınıfları ve Color Picker bootstrapın eklemiş olduğu yeni renk skalası sayesinde esktra css kodu yazmadan istediğimiz bir çok renge ulaşabileceğiz.
Detay için :
https://getbootstrap.com/docs/5.0/customize/color/
Buna ek olarak color picker uygulaması da hazırlanmış. Genelde panellerimizde renk seöimi yaptırmak için kullandığımız bir özellik olan color picker artık bootsrap da da var.
Detay :
https://getbootstrap.com/docs/5.0/fo...control/#color 5. Yenilenmiş Bir Accordion
Günümüz web sitelerini hazırlarken çokça kullanmaya başladığımız Accordion bootstrap 5 ile daha güzel bir görünüme ve işleyişi kavuşmuş durumda. Seçili tab ın renklenmesi ve seçili tabın icon açılıp kapanma hareketi için ekstra css/js yazmamız gerekiyordur. Buna gerek kalmadı artık. Güzel yeniklerden birisi de bu bence..
Detay :
https://getbootstrap.com/docs/5.0/co...rdion/#example 6. Responsive font size
Genel olarak px yerine rem kullanımına geçilmiştir. Buda tabi responsive için gerekli bir hamleydi. Fontsize ları genelde css yazarken başlangıçta h,p,a sınıflarını kendimiz belirleriz. Ama bootstrap 5 ile gelen yeni sınıflar ile ekstra css yazma işimiz daha da azalacak gibi
Kullanımı;
fs-1: 2.5rem
fs-2: 2rem
fs-3: 1.75rem
fs-4: 1.5rem
fs-5: 1.25rem
fs-6: 1rem
7. Line height Sınıfları
Bootstrap line-height i standart belirler sonrası kendimiz gerekli yerlerde css ile müdahale ederdik. Bootstrap 5 ile 4 tane line height sınıf geldi. Bu sayede yine css kodlarımız bir nebze azalacak gibi..
Kullanım;
lh-1: 1
lh-sm: 1.25
lh-base: 1.5
lh-lg: 2
8. İcon
Bootstrap 5 den önce sınırlı sayıda ve belli başlı iconlar varkdı ve mecburen font awesome veya benzeri bir icon kütüphanesi kullanıyorduk. Artık ekstra bir kütüphaneye gerek kalmayacak seviyede bir icon seti hazırlanmış. İllaki eksik birşey olursa da svg olarak indirilip kullanılabilir. Bu icon setten sonra ekstradan css/js leri siteye eklemey gerek kalmayacak gibi duruyor. Kesinlikle incelenmesi gereken bir alan olmuş..
İcon Seti :
https://icons.getbootstrap.com/ 9. Position Ekstra Özellikler
Bootstrap 4 ile position un 5 özeleliği vardı kullanabildiğimiz.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Bunlar dışında yptığımız tüm işleri için ekstra css yazıyorduk. Özellikle absolute kullandığımızda top-bottom/ left-right için css yazıyorduk.
Bootstrap 5 ile bu ekstra css lere de gerek kalmayacak gibi gözüküyor.
Kullanım;
- top 0/50/100
- start 0/50/100
- bottom 0/50/100
- end 0/50/100
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 end-0">
</div> <div class="position-absolute top-50 start-50"></div>
<div class="position-absolute bottom-50 end-50"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
Eksik Yönü
Sadece 0 50 100 kullanımına izin veriyor. Keşke İstediğimiz rakamı yazabilseydik. Belki bir sonraki güncelleme ile bu da eklenir.
10. Overflow Ekstra Sınıflar
Bootstrap 4 de sadece iki seçenek vardı.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
Bootstrap 5 ile 2 özellik daha eklendi.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
11. Fullscreen ve Responsive Modal
Modal işlemleri standar haldeydi. Eklemişsek direk kullanıyorduk ama farklı ekran boyutlarında istediğimiz biçime getirmek için yine esktra css yazmamız gerekiyordu. Yeni gelen sınıflar sayesinde ekstra css e pek gerek kalmayacak gibi..
.modal-fullscreenAlways.modal-fullscreen-sm-downBelow 576px.modal-fullscreen-md-downBelow 768px.modal-fullscreen-lg-downBelow 992px.modal-fullscreen-xl-downBelow 1200px.modal-fullscreen-xxl-downBelow 1400px
Bunlara ek olarak modalı istediğimiz ekran boyutunda açmak içinde sınıflar eklenmiş.
Örneğin sadece 800px üzerinde gözükmesi için modal-lg yazmamız yeterli..
Small.modal-sm300pxDefaultNone500pxLarge.modal-lg800pxExtra large.modal-xl1140px
12. Background Gradient Özelliği
Bazen butonlarda vb. yerlerde ufaktan bir gradient verip tasarımın daha güzel bir hale gelmesini sağlarız. Tabi bunun içinde ekstra css gerekiyordu ama artık buna da çözüm bulunmuş.
Detay :
https://getbootstrap.com/docs/5.0/ut...round-gradient :
https://getbootstrap.com/docs/5.0/ut...round-gradient 13. Border-width Özelliği
Border2ın çervece kalınlığı eskisinde standarttı ve arttırmak için ekstra css e gerek vardı. Bunun içinde bir yenilik yapılmış ve güzel bir iş çıkmış bence..
Kullanımı;
<span class="border border-1"></span> 1px
<span class="border border-2"></span> 2px
<span class="border border-3"></span> 3px
<span class="border border-4"></span> 4px
<span class="border border-5"></span> 5px
14. Buttonlar Arası Boşluk
Sadece blok butonlarda kullanılmak üzere hazırlanmış bir sınıf yapısı. display gird ile kullanılması gerekiyor.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Kullanım;
gap-0 : 0
gap-1 : 0.25rem
gap-2 : 0.5rem
gap-3 : 1rem
gap-4 : 1.5rem
gap-5 : 3rem
Detay :
https://getbootstrap.com/docs/5.0/co...#block-buttons 15. Form Select Özelliği
Bootsrap 4de Select işlemi form control sınıfı altında hazırlanmıştı. Bootstrap 5 ile form işlemleri genel anlamada bir toparlanmış ve düzenlenmiş diyebiliriz. Bunların başında da form-select sınıfı geliyor.
detay :
https://getbootstrap.com/docs/5.0/forms/select/#default