Sürüm 5'te Bootstrap için Yeni Logo

Bootstrap için yeni bir logo, Jekyll'den Hugo'ya geçiş gibi kaputun altında pek çok değişiklik olsa da, öncelikle web geliştirme projelerini en çok etkileyen bu yönlere değineceğiz.

Web Geliştiricileri için Bootstrap 5'teki Yenilikler

Herhangi bir büyük sürüm değişikliğinde olduğu gibi, Bootstrap 5'te Bootstrap 4'e göre çok şey değişti. Bootstrap 4 veya önceki sürümlerle oluşturulmuş eski projelerinizi güncellerken aklınızda bulundurmanız gereken önemli farklılıkların listesi burada. Bootstrap 5 ile yeni bir projeye başlıyorsanız veya Bootstrap şablonları kullanıyorsanız , bu değişiklikleri aklınızda tutmak Bootstrap 4 yerine Bootstrap 5'i seçme konusunda karar vermenize yardımcı olacaktır.

1. jQuery yerine Vanilya JavaScript

Bootstrap tanıtıldığından beri, menü genişletme, carousel, açılır menüler vb. gibi dinamik özellikler sunmak için jQuery'yi bir bağımlılık olarak kullandı. Ancak, jQuery'ye olan bu zorunlu bağımlılık, Bootstrap'ı aşağıdaki gibi modern JavaScript çerçeveleriyle kullanmak isteyen birçok geliştirici tarafından sevilmedi. React ve Vue.js. Bootstrap 5 ile bu bağımlılığı ortadan kaldırdılar.

Bunun Bootstrap 5'te JavaScript bağımlılığı olmadığı anlamına gelmediğini unutmayın. Bootstrap 5'teki açılır menü, kaydırıcı, popover vb. davranışlar Popper'a ve kendi vanilya JavaScript modülüne bağlıdır. jQuery ekleme zorunluluğu olmayacak. Projeniz jQuery'ye bağlıysa, yine de ekleyebilirsiniz.

2. Tarayıcı desteği – IE 10 ve 11 desteği kaldırıldı

Microsoft'un çabalarını tamamen Edge tarayıcıya kaydırmasıyla birlikte , Internet Explorer pazar payını hızla kaybediyor. Ayrıca Edge, Chrome ve Firefox'un en son sürümleriyle aynı düzeyde tüm modern JavaScript ve CSS özelliklerine sahip olmasını sağlayan açık kaynaklı krom motorunu benimsemiştir. Bunu göz önünde bulundurarak, Bootstrap ekibi, CSS değişkenleri, daha hızlı JavaScript ve daha iyi API'ler gibi modern bir dizi özellik sağlamasına olanak tanıyan Internet Explorer desteğini bıraktı.

Bootstrap 5'in artık desteklemediği tarayıcıların tam listesi:

• Microsoft Edge Eski Bırakıldı
• Bırakılan Internet Explorer 10 ve 11
• Bırakılan Firefox < 60
• Bırakılan Safari < 10
• Bırakılan iOS Safari < 10
• Düşen Krom < 60
• Android'i düşürdü < 6

3. CSS özel özellikleri

Internet Explorer desteğinin kaldırılması sayesinde Bootstrap 5 artık özel CSS özelliklerini destekliyor. Bootstrap'te sadece renk ve yazı tipleri için 4 kök değişken mevcuttu. Bootstrap 5 artık bir avuç bileşen ve düzen seçeneğinde CSS değişkenleri sunuyor. Örneğin, tablo bileşeni, çizgili, üzerine gelinebilir ve etkin tablo stillerini kolaylaştırmak için yerel değişkenleri kullanır.

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}

4. Genişletilmiş renk paleti

Tailwind gibi birçok CSS çerçevesi , geliştiriciler arasında oldukça popüler olan geniş bir renk paleti seti sunar. Bootstrap 5 şimdi renk paletini mavi-100$, mavi-200$, mavi-300$, …., mavi-900$ gibi farklı tonlarda bulunan daha fazla rengi içerecek şekilde genişletti. Bu, kod tabanından hiç ayrılmadan uygulamanızın görünümünü ve verdiği hissi kolayca özelleştirmenizi sağlar. Renk tonları oluşturucusunu kullanarak bu renkleri kendi renk paletinizle kolayca geçersiz kılabilirsiniz .

5. Güncellenmiş Form Kontrolleri

Bootstrap 5, özel tasarlanmış form kontrolleri içerir. Bootstrap 4'te form kontrolleri, her tarayıcının sağladığı varsayılanları kullanıyordu. Bootstrap 5'te form kontrolleri, özel tasarımı sayesinde tüm tarayıcılarda çok daha tutarlı bir görünüm ve his sunacaktır.

Bu yeni form kontrollerinin tamamı tamamen semantik, standart form kontrolleri üzerine inşa edilmiştir ve bu nedenle form kontrolleri ve etiketleri için fazladan işaretlemeler eklemeye gerek yoktur.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

6. Yardımcı Programlar API'sı

Bootstrap 5'e yeni bir yardımcı program API'si eklenmiştir. Kendi yardımcı programlarınızı oluşturmak için Sass'ı kullanabilirsiniz. Varsayılan yardımcı program sınıflarını değiştirmek veya kaldırmak için Bootstrap yardımcı program API'sini de kullanabilirsiniz.

"width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),

 Artık ve  state gibi sözde sınıf varyasyonları oluşturma seçeneğini de kullanabilirsiniz  . Bir örnek::hover:focus

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Yukarıdakilerle oluşturulan CSS yardımcı program sınıfları:

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

7. Gelişmiş ızgara sistemi

Bootstrap 5, Bootstrap 4'te tanıtılan grid sistem yapısını korurken, yeni sınıflar ekleyerek geliştirmektedir. Bu, ızgara yapısını eski sürümden daha yeni sürüme taşımak için daha az çaba gerekeceği anlamına gelir.

Bootstrap 5 ızgara sisteminde neler değişti:

• Yeni xxlızgara katmanı.
• Oluk sınıfları, yardımcı programlar kullanılarak ızgaraya eklenebilir ..g*
• Form düzeni seçenekleri yeni ızgara sistemi ile değiştirildi.
• Dikey boşluk sınıfları eklendi.
• Sütunlar artık   varsayılan olarak değildir.position: relative

8. CSS Izgara Desteği

 Bootstrap 5, varsayılan ızgara sisteminin isteğe bağlı bir yedeği  olarak  CSS Grid'in deneysel bir sürümünü tanıttı . Bunu kullanmak zorunlu değildir, ancak CSS Grid'i Flexbox'a tercih edenler bunu ister.

9. Yeni tuval dışı bileşen ve Navbar Offcanvas

Bootstrap 5'e, gezinme, alışveriş sepetleri veya tuval dışı menü için genişleyen kenar çubukları oluşturmak için kullanılabilen yeni bir tuval dışı bileşen eklendi. Bu tuval dışı bileşenler, görünümün soluna, sağına veya altına yerleştirilebilir ve veri öznitelikleri veya JavaScript API'leri ile yapılandırılabilir.

 .navbar-expand-* sınıflar ayrıca gezinme çubuğu içindeki tuval dışı destekleri içerecek şekilde genişletildi. Gezinme çubuğu öğelerinizi uygun tuval dışı HTML ile sarabilir ve çalışması için gezinme çubuğu geçiş düğmenizi tuval dışı menüye yönlendirebilirsiniz.  Daha fazla bilgi için tuval dışı gezinme çubuğu belgelerini okuyun .

10. Yeni akordeon

Bootstrap 5, yepyeni bileşen için destek ekler . Yeni akordeon, durumu ve tıklanabilirliği gösteren şerit simgeleri olarak Önyükleme Simgelerini içerir. Akordeonları üst kaplarıyla uçtan uca oluşturmak için varsayılanı, bazı kenarlıkları ve bazı yuvarlatılmış köşeleri kaldırmak için  de kullanabilirsiniz ..accordion.accordion-flushbackground-color

11. Form Girişlerinde Kayan Etiketler

Bootstrap 5'e yeni bir kayan etiket desteği de eklendi. Bu davranış, MDB gibi birçok malzeme tasarımı UI çerçevesi tarafından gösterilen davranışa benzer . Form doğrulama stilleri de mevcut kayan etiketlerle beklendiği gibi çalışır.

12. Yer tutucu bileşeni

Uygulamanız yüklenirken kullanıcı arayüzü oluşturmanıza olanak tanıyan yeni bir yer tutucular bileşeni eklendi.

13. RTL desteği

Bootstrap 5 artık RTL desteği içeriyor. RTL ( sağdan sola ) desteği, Arapça, İbranice, Peştuca, Farsça, Urduca ve Sindhi gibi dillerde web siteleri oluşturabileceğiniz anlamına gelir. Bu dillerdeki yazılar, sayfanın sağından başlar ve genel tasarımınıza uyum sağlamak için kendi özel stil ayarlarını gerektiren sola doğru devam eder. Artık Bootstrap 5'in RTL desteği yerleşik olarak bulunduğuna göre, RTL web siteleri oluşturmak için Bootstrap CSS dosyasının RTL sürümlerini kullanabileceksiniz. RTL için belgeleri ve örnekleri kontrol edin .

14. Daha kolay özelleştirme ve tema oluşturma

Bootstrap 5, Bootstrap'in kaynak Sass dosyalarının üzerine inşa etmek için daha fazla içerik ve kod parçacıkları ile v4'ün tema sayfasını genişleten yeni bir Özelleştirme bölümü sunar. Bootstrap'i daha hızlı özelleştirmeye başlamanıza yardımcı olmak için bir npm başlangıç ??projesi de sağlanmıştır. Bootstrap'i Parsel ile kurmak da artık belgelenmiştir.

15. Ad alanlı veri öznitelikleri

Bootstrap, JavaScript davranışlarını etkinleştirmek için HTML özniteliklerini kullanır. Bootstrap 5'te, bu tür tüm nitelikler olarak yeniden adlandırılmıştır . Böylece Bootstrap 5'teki tüm veri öznitelikleri artık bir infix olarak içeriyor. Bootstrap 4'ten 5'e geçerken tüm bu tür veri özniteliklerini değiştirmeniz gerekecek, ancak bundan sonra bu, Bootstrap'in veri özniteliği adlandırmasını diğer kitaplıkların veya kendinizin gerektirdiğinden ayrı tutacaktır.data-*data-bs-*bs

16. Popper.js v2

Bootstrap'taki araç ipuçları ve açılır pencereler, Popper.js tarafından desteklenmektedir . Bootstrap 5'te, küçük kırılma değişiklikleri getiren Popper.js'nin v2'si benimsenmiştir:

• offset Araç İpucu/Popover ve Açılır menüden seçenek kaldırıldı  . Bu artık  popperConfig parametre kullanılarak gerçekleştirilebilir.
• fallbackPlacement Seçenek haline  fallbackPlacementsgeldi . 

17. SVG Simge Kitaplığı

Bootstrap artık kodunuza entegre edilmesi kolay 1.000'den fazla simgeden oluşan SVG kitaplığı sunuyor. Bu simgeleri satır içi kod veya SVG hareketli grafiği ile ekleyebilirsiniz. Bu simge kitaplığının kararlı sürümüyle birlikte bir web yazı tipi sürümü de tanıtılacaktır. Bu simge kitaplığını mevcut projelerimizde (Bootstrap 4 dahil) kullanıyoruz ve oldukça kapsamlı olduğunu gördük.

18. Daha İyi Belgeler ve Örnekler

Ayrıca, okunabilirliği artırmak için yenilenen Bootstrap 5 dokümantasyon sitesinde yeni bir görünüm ve his fark edeceksiniz. Belgelerdeki kenar çubuğu artık daha hızlı gezinme için genişletilebilir bölümler kullanıyor. Ayrıca, varsayılan Bootstrap deneyimini özelleştirmenize yardımcı olacak geliştirilmiş Sass belgelerini de bulacaksınız.

Başlıklar, kahramanlar, jumbotron, özellikler ve kenar çubukları için çeşitli snippet'lerle yeni örnekler eklendi.

19. Site oluşturma için Jekyll üzerinden Hugo

Bootstrap'ın dokümantasyon sitesi, statik site oluşturma için Hugo over Jekyll'i benimsemiştir. Hugo, Go ile yazılmış popüler ve hızlı bir çapraz platform statik site oluşturucudur. En iyi statik site oluşturucular hakkında buradan bilgi edinebilirsiniz .

20. Yeni Logo

Son olarak, Bootstrap 5 artık yepyeni bir logoya sahip (makalenin başına eklenmiştir).

Bootstrap 5 vs Bootstrap 4 – Hangisini kullanmalı?

Mevcut projelerinizde Bootstrap 4'e bağlı kalmak istemenizin bazı nedenleri şunlardır :

• Projenizin IE 10 ve IE 11 için desteğe ihtiyacı var.
• Projeniz jQuery'ye bağlı ve Bootstrap 5'in yeni özelliklerine ihtiyacınız yok.
• Zaten Bootstrap 4 kullanıyorsunuz ve henüz Bootstrap 5'in yeni kırılma değişikliklerine uyum sağlamak istemiyorsunuz.

İşte yeni projelerinizde Bootstrap 5'e geçmek veya eski projelerinizi güncellemek istemenizin nedenleri :

• React veya Vue.js kullanıyorsunuz ve Bootstrap'ı jQuery'ye bağımlı olmadan kullanmak istiyorsunuz.
• Genişletilmiş renk paleti, gelişmiş ızgara sistemi, özel yardımcı programlar, RTL vb. gibi Bootstrap'in yeni özelliklerini kullanmak istiyorsunuz.

Bana gelince, mevcut projelerimde Bootstrap 4 kullanmaya devam edeceğim. Yeni web projeleri için, tanıtılan yeni özelliklerden yararlanmak için hemen Bootstrap 5 kullanmaya başlayacağım. Yavaş yavaş, daha yeni sürüme geçmek için mevcut projelerimi yükselteceğim. Güncellenmesi gereken farklı sınıfları ve ek geçiş adımlarını kontrol etmek için Bootstrap sitesindeki resmi v5'e geçiş kılavuzunu okuyabilirsiniz .

 

Kaynak

• https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/