Bootstrap 3 ve Bootstrap 4 – Genel Bakış

Bootstrap, duyarlı, mobil öncelikli web siteleri geliştirmek için en güvenilir açık kaynaklı ön uç çerçevesi olmuştur. Bootstrap ünlü bir çerçevedir, Neden??? Çünkü tek gereken temel HTML ve CSS bilgisidir ve farklı cihazlarda yanıt vermeyi önemseyen önceden tanımlanmış önyükleme sınıflarını kullanarak çekici ve işlevsel bir web sitesi oluşturabiliriz.

Bootstrap 3 2013 yılında piyasaya sürüldü ve son kararlı sürüm Bootstrap 3.3.7 Temmuz 2016'da yayınlandı. Ekim 2014'te Twitter, Bootstrap 4'ün geliştirilme aşamasında olduğunu duyurdu. Bootstrap 4'ün ilk alfa sürümü Ağustos 2015'te yayınlandı. Şimdi ise Ağustos 2017'de Bootstrap 4.0.0-beta sürümü yayınlandı. 0'dan öğrenmeye başlamak istiyorsanız, bu ayrıntılı Bootstrap eğitimine göz atabilirsiniz.

Bu gönderinin odak noktası, sürüm 3'ten yeni yayınlanan sürüm 4.0.0-beta'ya kadar olan temel farklılıklar, eklemeler ve çıkarmalar olacaktır.

Sürüm 4'te Neler Farklı:

Artık Bootstrap 4'ün yeni özelliklerinden bahsetmeye başlayabiliriz. Teknoloji hızla geliştikçe, temiz, hızlı web siteleri oluşturmayı çok daha basit hale getirmek için daha yeni ve daha akıllı diller geliştirildi. Bootstrap'in en yeni sürümünde durum böyle. Ekip, bu "sürüm 4, neredeyse tüm projenin büyük bir yeniden yazılması" olduğunu söylüyor. Bu iyileştirmedeki bazı önemli değişiklikleri özetleyeceğiz.

Küresel Değişiklikler:

• Kaynak CSS dosyaları için Less'ten Sass'a geçildi .
• Bootstrap'in birincil CSS birimi olarak px rem geçiş yapıldı, ancak cihaz görünüm pencereleri tür boyutundan etkilenmediğinden pikseller hala ortam sorguları ve ızgara davranışı için kullanılıyor.
• Global yazı tipi boyutu 14 pikselden 16 piksele yükseltildi .
• ~480 piksel ve altı için yeni bir ızgara katmanı eklendi.

Izgara sistemi:

Bootstrap 4'ün iyileştirmeye yönelik en büyük adımı, Flexbox'ı benimseme yönündeki hareketidir. Flexbox'ın bir parçası olarak, dikey ve yatay hizalama sınıfları için destek dahildir. Bootstrap 4, kişiselleştirmeye çok önem veriyor. Yeni ızgara katmanı sistemi, Bootstrap 4'ün 5 ızgara katmanına kadar varlığının keyfini çıkarmasını sağlar (5 katman örneği: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4). Bootstrap 4'ün gelişmiş bir ızgara sistemine erişim sağladığını kolayca söyleyebiliriz.

• Daha ayrıntılı kontrol için 768 pikselin altına yeni bir sm ızgara katmanı eklendi. Artık xs, sm, md, lg ve xl var. Bu aynı zamanda her katmanın bir düzey yukarı çıktığı anlamına gelir (böylece v3'teki .col-md-6 artık v4'teki .col-lg-6'dır).
• Yeni ızgara katmanını hesaba katmak ve sütunların maksimum genişliklerinde 12'ye eşit olarak bölünebilmesini sağlamak için ızgara sistemi medya sorgusu kesme noktaları ve kapsayıcı genişlikleri değiştirildi.
• Izgara kesme noktaları ve kapsayıcı genişlikleri artık bir avuç ayrı değişken yerine Sass haritaları ($grid-breakpoints ve $container-max-widths) aracılığıyla işleniyor. Bunlar, @screen-* değişkenlerini tamamen değiştirir ve ızgara katmanlarını tamamen özelleştirmenize olanak tanır.
• Medya sorguları da değişti. Medya sorgu bildirimlerini her seferinde aynı değerde tekrarlamak yerine, artık @include media-breakpoint-up/down/only var. Artık @media (min-width: @screen-sm-min) { … } yazmak yerine @include media-breakpoint-up(sm) { … } yazabilirsiniz.

Tarayıcı Desteği:

• IE8 ve iOS 6 desteği düştü. v4 artık yalnızca IE9+ ve iOS 7+. Bunlardan herhangi birine ihtiyaç duyan siteler için v3 kullanın.

Yardımcı sınıflar:

Bootstrap 4'te, mevcut herhangi bir işlevselliği engellemeden yeni yardımcı program sınıfları dahil edilmiştir. Bu tür önemli eklemeler, duyarlı metin hizalama sınıfları, duyarlı kayan noktalar ve duyarlı gömme gibidir. Pek çok kısayol sunmanın yanı sıra, bunlar sırasıyla metnin hizalamasını değiştirmeye, öğelerin yüzmesine ve herhangi bir gömülü ortamın en boy oranının ölçeklenmesine izin verir. (örnek: .hidden-md-up orta, büyük ve ekstra büyük görünüm pencerelerinde bir öğeyi gizler. Şimdi, .hidden-md-up yerine .d-md-none kullanın).

Görüntüler:

• .img-responsive olarak .img-fluid olarak yeniden adlandırıldı.
• .img-rounded olarak .rounded olarak yeniden adlandırıldı
• .img-circle , .rounded-circle circle olarak yeniden adlandırıldı

Tablolar:

• Duyarlı tablolar artık bir sarma öğesi gerektirmez. Basit bir deyişle, Bootstrap 3'te, üst öğeye <div> .table-responsive sınıfı eklenmelidir. Ancak Bootstrap 4'te, <table> öğesine eklenecek .table-responsive sınıfı.
• Yeni bir .table-inverse seçeneği eklendi.
• Tablo başlığı değiştiricileri eklendi: .thead-default ve. .thead-inverse
• Bağlamsal sınıflar .table- - önekine sahip olacak şekilde yeniden adlandırıldı. Bu nedenle, .active .success , .warning , .danger ve .table-info için .table-active , .table-success , .table-warning , .table-danger ve .table-info.

Navigasyon:

Bootstrap 4'te Navigasyon bileşeni büyük ölçüde basitleştirildi. En son gezinme temel sınıfını kullanan yeni bir öğe listesi oluşturmak için bir tane gereklidir. Ayrıca nav-link sınıfı, nav-item sınıfı ve gezinme çubuğu stilleri gibi bazı yeni eklemeler de var.

• Flexbox ile bileşen yeniden yazıldı.
• .navbar-default artık .navbar-light , ancak .navbar-dark aynı kalır. Ancak, bu sınıflar artık background-color s ayarlamaz; bunun yerine esasen sadece color etkilerler.
• .navbar-toggle artık .navbar-toggler ve farklı stillere ve iç işaretlemeye sahiptir (üç <span> s'den fazla değil).
• .navbar-form sınıfı tamamen kaldırıldı. Artık gerekli değil; bunun yerine, sadece .form-inline kullanın ve gerektiği gibi kenar boşluğu yardımcı programlarını uygulayın.
• Gezinme çubukları artık varsayılan olarak margin-bottom veya border-radius içermez.

Bootstrap Sürüm 3 ve Sürüm 4'ün Karşılaştırma Tablosu

Daha önce de söylediğimiz gibi Bootstrap ekibi çerçeveyi yeniden yazdı. Yani yukarıdaki değişiklikler sadece burada yazdığımız temel değişikliklerdir. Derinlemesine okumak için lütfen Bootstrap 4 bağlantısını takip edin.

Bootstrap 4'e mi geçmeliyiz yoksa Bootstrap 3'te mi kalmalıyız?

Bootstrap 4'ün sunduğu özelliklerden bahsetmiştik. Tüm çerçeve boyunca gereksiz öğeleri ve sınıfları optimize etmek ve temizlemek için çok fazla çalışma yapıldığını görebiliyoruz. Bootstrap 4, harika bir mobil uyumlu web sitesi oluştururken daha fazla esneklik ve kolaylık için çok daha hızlı ve akıcı olmayı vaat ediyor.

Bootstrap 4, flexbox'a taşındı. Bu, en büyük ve önemli başarılardan biri olarak kabul edilebilir. Bu, aşağıdaki faydaları sağlayacaktır:

• Flexbox tabanlı ızgara
• Yeni XII ızgara katmanı
• En son otomatik düzen ızgarası
• Gezinme çubuğu özelleştirme seçenekleri
• Yeni Aralık yardımcı programları
• Sans Glyphicons yapılandırması (Şişkinlikten arındırılmış bölge)
• Duyarlı boyutlandırma
• Duyarlı Şamandıralar
• Otomatik Kenar Boşlukları
• Dikey Merkezleme

Çözüm

Bootstrap her zaman geliştiricilerin hayatını kolaylaştırmıştır ve sürümdeki güncelleme ile artık bootstrap geliştiriciler için işleri daha da kolaylaştırmak için daha birçok yeni özellik ve seçeneğe sahiptir ve bu nedenle insanlar Bootstrap 3'ten Bootstrap'a geçiş yapmaktadır. 4 önceki muadilinden daha uygun ve erişilebilir olduğu için.