Bootstrap 4'ten 5'e Yükseltme: Yenilikler, Güncellemeler ve İyileştirmeler

Herkese merhaba 👋🏻 ! Bootstrap 4'ten 5'e geçiş sürecinde edindiğim deneyimleri sizinle paylaşmak istiyorum. Bu makalede, Bootstrap’ın önemli güncellemelerini ve kaldırılan özellikleri detaylı bir şekilde inceleyeceğiz.

Genel Değişiklikler

1. Jquery Bağımlılığı Kaldırıldı: Bootstrap 5'e geçişte, jQuery bağımlılığı artık gerekli değil; onun yerine Vanilla JS tercih edilmiştir. Bu değişiklik, projenin hafifletilmesine ve daha hızlı yükleme sürelerine olanak tanımaktadır.

2. Popper Güncellemesi: Tooltip ve popover öğelerin konumlandırılması teknik açıdan zorlu bir süreçtir. Popper, bu konuda yardımcı olmak için tasarlanmış bir araçtır! Ayrıca, Popper.js’in son güncellemesi ile v1.x sürümünden v2.x sürümüne geçiş yapıldı. Bu güncelleme, daha fazla özellik ve performans iyileştirmeleri sunarak projenizin daha güncel bir temele dayanmasını sağlar.

3. Tarayıcı Desteği:

• Internet Explorer 10 ve 11 destekten çıkarıldı.
• Microsoft Edge’in 16 sürümünden önceki sürümleri destekten çıkarıldı.
• Firefox’un 60 sürümünden önceki sürümleri destekten çıkarıldı.
• Safari’nin 12 sürümünden önceki sürümleri destekten çıkarıldı.
• iOS Safari’nin 12 sürümünden önceki sürümleri destekten çıkarıldı.
• Chrome’un 60 sürümünden önceki sürümleri destekten çıkarıldı.

Grid Güncellemeleri: Sütunlar Arasındaki Yenilikler ve Kaldırılan Özellikler

• Bootstrap 4 ile birlikte, grid sistemini belirlerken kullanılan col-sm, col-md, col-lg ve col-xl sınıflarına ek olarak, Bootstrap 5'te col-xxl sınıfı da eklenmiştir.
• Sırasıyla sütunlar arasındaki yatay ve dikey boşlukları kontrol etmek için .g-*, .gx-* ve .gy-* sınıfları eklendi.
• .no-gutters→ .g-0 olarak güncellendi.
• Sütunlara artık varsayılan olarak position: relative stili uygulanmamaktadır. Bu durum, bazı bölgelerde tasarım bozukluklarına neden olabilir. Sorunu düzeltmek için, gerekli yerlerde position-relative sınıfını eklemeniz gerekebilir.
• media object kullanımı kaldırıldı. Düzenlemek istiyorsanız, bu URL’den destek alabilirsiniz.

Form Elemanları Güncellemeleri: Yeni Sınıflar ve Kaldırılan Özellikler

Önceki sürümde, form elemanları özel stiller için custom-* sınıfları kullanılarak ifade edilirken, yeni güncelleme ile bu sınıfların okunabilirliğini artırmak amacıyla form ifadesi eklenmiştir. Örneğin, custom-check yerine form-check, custom-switch yerine form-switch gibi sınıflar tercih edilmeye başlanmıştır. Bu değişiklik, form elemanlarının tanımlanmasını daha anlaşılır ve tutarlı hale getirmeyi amaçlamaktadır.

Güncellenmiş sınıflar şu şekildedir:

• .custom-check → .form-check
• .custom-select → .form-select
• .custom-range → .form-range
• .custom-check.custom-switch → .form-check.form-switch
• .form-control-file ve .form-control-range sınıfları kaldırılmıştır.
• Önceki sürümlerde, dosya inputlarına özel stiller eklemek için kullanılan .custom-file ve .form-file sınıfları artık kullanılmıyor. Bunun yerine, dosya inputlarına özel stiller, .form-control sınıfının üstüne eklenerek uygulanmıştır.
• Ayrıca, form elemanlarını düzenlemek için önceki sürümlerde kullanılan .form-group, .form-row, ve .form-inline gibi özel sınıfların kullanımı sona ermiştir. Bunun yerine genel bir grid sistemini ve yardımcı sınıfları tercih etmeniz önerilmiştir. Yeni yaklaşım ile bağımlılığı azalttığını düşünebiliriz.
• .input-group-append ve .input-group-prepend sınıfları kaldırıldı. Artık doğrudan input gruplarının altına .input-group-text sınıfını ekleyebiliriz.
• Label kullanımları artık form-label sınıfını içermelidir. Önceki yapıda label etiketleri margin-bottom değerini içeriyordu, ancak yeni yapıda bu özellik içermemektedir. form-label sınıfını ekleyerek eski görünümü elde edebilirsiniz.

Bootstrap 4

  <label for="inputPassword4">Password</label>
  <input type="password" id="inputPassword4" class="form-control">

Bootstrap 5

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">

Components Güncellemeleri: Yenilikler ve Kaldırılan Özellikler

Genel Değişiklik

• Alerts, cards, dropdowns, list groups ve modals üzerindeki horizontal padding değeri, artık varsayılan $spacer değeri olan 1rem olarak ayarlandı.

Accordion

• Yeni bir Accordion componenti eklendi.

Alerts

• Alerts componenti detayında artık, farklı uyarı türlerini veya durumlarını belirten ikonlarla birlikte örnek içeriyor. Ayrıntı için tıklayınız

Badges

• Badge-* tüm arkaplan utility’leri için olan .badge-* renk sınıfları kaldırıldı. Artık .bg-* olarak ifade edililiyor.
• badge-pill değeri kullanımdan kaldırıldı. Onun yerine rounded-pill sınıfı getirildi.
• Badge varsayılan padding değerleri .25em/.5em değerinden .35em/.65em olarak güncellendi.

Buttons

• button-variant() ve button-outine-variant() mixinleri ek parametreleri desteklemek için güncellendi.
• Disable butonlar artık pointer-events: none; özelliğini içeriyor.
• .btn-block kullanımı artık desteklenmiyor. Bunun yerine d-grid ve .gap-* sınıfları ile düzenlenmesi öneriliyor.
• Toggle Butonları artık JavaScript’e ihtiyaç duymadan, checkbox’lar veya radio butonları içerip içermemelerine bakılmaksızın kullanılabiliyor. Kapsayıcı bir elemente gerek kalmadan, yeni eklenen .btn-check sınıfı doğrudan <input> elemanına ekleniyor. Ayrıca, <label> elemanı, isteğe bağlı olarak eklenen .btn sınıfları ile uyumlu hale getiriliyor.

Bootstrap 4

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

Bootstrap 5

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

Card

• Bootstrap 4'te kullanılan card-deck sınıfı, kartları yatay bir düzende hizalamak ve eşit genişlikte göstermek amacıyla kullanılıyordu. Ancak, Bootstrap 5 ile birlikte bu özellik kaldırıldı ve yerine kartların yerleşimini daha esnek ve özelleştirilebilir hale getirmek için .row-cols-* sınıfları getirildi. Bu sınıflar sayesinde her bir kartın genişliği ve konumu daha esnek bir şekilde ayarlanabilir.

Bootstrap 4

<div class="card-deck">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>

Bootstrap 5

<div class="container">
    <div class="row row-cols-3">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>

• .card-columns sınıfı kullanımdan kaldırıldı.
• .btn-close-white adında yeni bir varyant eklendi. Bu varyant, close ikonlarını daha koyu arka planlara karşı daha yüksek kontrast sağlamak amacıyla filter: invert(1) stilini kullanmaktadır.

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

Collapse

• Accordions için scroll anchoring özelliği kaldırıldı.

Dropdowns

• Dark tema dropdown bileşeni için, .dropdown-menu-dark sınıfı eklenmiştir.
• Yatay dropdown iç boşluğunu kontrol etmek amacıyla, $dropdown-padding-x değişkeni eklenmiştir.
• Dropdown menülerindeki divider rengi koyulaştırılmıştır.
• Bootstrap 5 ile birlikte, dropdown eventleri artık event bubbling yöntemiyle işlenmektedir. Bu, olayların başlangıcının dropdown toggle butonunda gerçekleşmesi ve ardından parent elemente doğru aktarması anlamına gelir.
• Bootstrap’ın önceki sürümlerinde, genellikle düz <a> öğeleri kullanılarak dropdown menü içeriği oluşturulurdu. Ancak, Bootstrap 5 ile birlikte, içeriği temsil eden öğelerin <li> içinde yer aldığı .dropdown-items sınıfını kullanma seçeneği eklenmiştir.
• Dropdown menülerin pozisyonlandırma davranışını belirlemek için iki yeni özellik ekledi: data-bs-popper="static" ve data-bs-popper="none".

Jumbotron

• Jumbotronlar artık Bootstrap 5'te desteklenmiyor.

List group

• Bootstrap 5 ile tanıtılan yeni .list-group-numbered sınıfı, numaralandırılmış liste grup öğeleri oluşturmayı kolaylaştıran bir CSS değiştirici sınıfıdır. İsterseniz, bu özelliği kullanmak için bir <ol> öğesi de ekleyebilirsiniz. Bu özellik, numaralandırılmış liste grupları oluşturduğunuzda, tarayıcı tarafından varsayılan numaralandırma stilini kullanmak yerine Bootstrap, numaralandırma işlemini kendi CSS kurallarıyla gerçekleştirir. Bu özellik, tarayıcı bağımsızlığı sağlayarak, projenizin farklı tarayıcılarda daha tutarlı bir görünüm sergilemesine katkıda bulunur.

Navbars

• Navbar componenti artık içinde container kullanımı gerektiriyor. Bu değişiklik, CSS ihtiyacını azaltmak amacıyla yapılmıştır.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid"> 
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Utilities

Bootstrap bir dizi yardımcı sınıfın ismini directional isimlerden ziyade mantıksal özellik isimlerine değiştirmiştir.

• .left-* ve .right-* isimleri .start-* ve .end-* olarak güncellendi.
• .float-left ve .float-right isimleri .float-start ve .float-end olarak güncellendi.
• .border-left ve .border-right isimleri .border-start ve .border-end olarak güncellendi.
• .rounded-left ve .rounded-right isimleri .rounded-start ve .rounded-end olarak güncellendi.
• .ml-* ve .mr-* sınıfları, .ms-* ve .me-* olarak güncellendi.
• .pl-* ve .pr-* sınıfları, .ps-* ve .pe-* olarak güncellendi.
• .text-left ve .text-right sınıfları, .text-start ve .text-end olarak güncellendi.
• .font-weight-* sınıfları, .fw-* olarak güncellendi.
• .font-style-* sınıfları, .fst-* olarak güncellendi.
• line-height sınıfları, .lh-1, .lh-sm, .lh-base, ve .lh-lg olarak güncellendi.
• font-size sınıfları, .fs-* olarak güncellendi.

Eğer makaleyle ilgili herhangi bir geri bildiriminiz ya da sorunuz varsa, lütfen benimle iletişime geçmekten çekinmeyin :)

Kaynakça

Migrating to v5

Bootstrap 5 ile Gelen Özellikler ve Yenilikler | PlusClouds Blog

Bootstrap / Bootstrap 4 ? Bootstrap 5Farkı, Yenilikler ve Neler Değişti?

https://www.cogen.com.tr/bootstrap-5-ile-gelen-yenilikler

Bootstrap Grid v5.1.3 (Bonus - Bootstrap Icons v1.7.1) | Figma Community