Bootstrap 5 hakkında bilmeniz gereken her şey

0
34

9 Haziran 2021 Aman Balooni General 132

Bootstrap, web sitesi geliştirmeye yardımcı olan ve herkesin kullanımına açık bir açık kaynaktır. Duyarlı web siteleri tasarlamaya yardımcı olur, modern bir arayüze sahiptir ve profesyonel görünür.

Son zamanlarda, Bootstrap 5 sürümüne yükseltildi. Aylarca süren rafine süreçlerinden sonra Haziran 2020’de Bootstrap 5 alpha’yı piyasaya sürdü. Ancak Bootstrap 5 geliştirme ekibi, hala alfa sürümünde olduğunu bildirdi. Bu nedenle geliştiriciler, ilk beta sürümü yayınlanana kadar sürümde önemli değişiklikler bekleyebilirler.

Bootstrap, orijinal olarak, dinamik web siteleri oluşturmak için kullanabileceğiniz bir CSS ve JavaScript kodu karışımıdır. HTML ve CSS tasarım şablonlarından oluşan ön uç tasarımı için etkili bir araçtır.

Bunlar, formlar, düğmeler, gezinmeler, modlar, tipografi ve diğer arabirim öğeleri gibi bileşenleri içerir. Bütün bunlar JavaScript uzantıları kullanılarak oluşturulabilir.

Bootstrap 5’in piyasaya sürülmesiyle, herkesin bilmesi gereken bazı doğaçlamalar ve güncellemeler var. Bunlar aşağıdaki gibidir:

jQuery’nin kaldırılması Vanilla JavaScript’e geçiş Duyarlı yazı tipi boyutu İnternet explorer 10 ve 11 desteğinin ortadan kaldırılması Oluk genişliği ölçü birimindeki değişiklikler Kart destelerinin ortadan kaldırılması Navbar optimizasyonu Özelleştirilmiş bir SVG simge kitaplığı Jekyll’den Hugo Sınıfı Güncellemelerine geçiş

Her güncellemeyi ayrıntılı olarak anlayalım:

1. jQuery’nin kaldırılması:

jQuery, web komut dosyası oluşturma için herhangi bir web geliştirme için verimli olan genel amaçlı bir soyutlama katmanı sunar. Genişletilebilir olduğundan, bir belgedeki öğelere çok fazla JavaScript kodlaması olmadan erişmenize olanak tanır. Bootstrap, 8 yılı aşkın bir süredir jQuery kullanıyor. Ancak jQuery, web sitelerinin indirmesini gerektiren şişirilmiş bir çerçeve haline geldi.

Tüm jQuery sorgu özellikleri kaldırılmıştır ve bootstrap 5’te vanilya JavaScript kodu ile değiştirilmiştir. Bu, dosya boyutunun veya çerçevenin ağırlığının ele alınmasında önemli ölçüde yardımcı olur.

2. Vanilla JavaScript’e geçiş:

Web geliştirme söz konusu olduğunda JavaScript, temel programlama dilidir. Önemli ölçüde çok sayıda web sitesi JavaScript tarafından desteklenmektedir. Hepsi çeşitli cihazlar aracılığıyla modern tarayıcılarda çalışır. Bu, JavaScript’i evrensel bir programlama dili yapar. Ancak Bootstrap 5 ile jQuery kaldırıldı. Bu nedenle geliştiriciler, işlevlerin boyutu hakkında endişelenmeden Vanilla JavaScript kodu yazabilirler.

3. Duyarlı Yazı Tipi Boyutu:

Birden fazla cihaz ve platformda hoş bir görünüm sunan bir web sitesine sahip olmak esastır. Medya sorgusu, tipografi sorunlarını çözen harika bir araçtır. Belirli görüntüleme platformları için belirli yazı tipi boyutlarının ayarlanmasına yardımcı olur. Bootstrap ile 5 duyarlı yazı tipi boyutu mevcut olacak. Duyarlı bir yazı tipi boyutu motoru kullanarak tipografi öğelerini kullanıcının cihazına göre otomatik olarak ayarlayacaktır. Bu motor aynı zamanda RFS motoru olarak da adlandırılır.

4. Internet Explorer 10 ve 11 Desteğinin Kaldırılması:

1995 yılında Microsoft, kullanıcıların internete erişim şeklini değiştiren internet explorer’ı başlattı. 2020’ye gelindiğinde IE’nin Chrome, Firefox ve diğer büyük web tarayıcılarıyla hiçbir ilgisi yoktur. JavaScript kodu, ES6 yerine ES5’e derleme gerektiriyordu. Çekimlerinden dolayı proje büyüklüğü %30’a kadar çıkmaktadır. Bu, modern JavaScript standartlarının kullanımını sınırlar. Bootstrap ekibi, IE 10 ve 11 için bu desteği bırakmaya karar verdi. Bu nedenle, bootstrap 5 ile çalışan geliştiricilerin, eski tarayıcıları barındırmak için kodu değiştirme konusunda endişelenmelerine gerek yok.

5. Oluk genişliği Ölçü birimindeki değişiklikler:

CSS, çoklu ölçüm metrikleri aracılığıyla belirli boyutlara veya uzunluklara sahip öğelere çeşitli yollar sunar. Bu metrikler arasında popüler olarak kullanılan metrik, piksel olarak bilinen PX’dir. Bootstrap, uzun bir süre için oluk genişliğini belirtmek için PX kullanır. Ancak bootstrap 5 güncellemesinin başlamasıyla birlikte bu parametrenin yerini rem alacaktır. Rem “kök em” anlamına gelir. Bu, kök eleman üzerinde hesaplanan yazı tipi boyutu değerine eşit demektir.

6. Kart Destelerinin Ortadan Kaldırılması:

Bootstrap 4’ü kullanırken geliştiriciler, birbirlerinden kopukken eşit parametreler ayarlamak için genişlik ve yükseklik kartlarını kullanıyorlardı. Bootstrap 5 ile takım, yeni derece sistemi artırılmış tepkisel kontrol sağladığı için kart destelerini ortadan kaldırdı. Bu nedenle, bir ızgara kullanarak gereksiz ekstra sınıflar sorununu çözebilirsiniz.

7. Navbar Optimizasyonu:

Bu bileşen, geliştiricilerin neredeyse her zaman kullandığı önyüklemenin çok önemli bir parçası olur. Önyüklemenin önceki sürümlerinde, daha iyi çalışmasına yardımcı olmak için önemli miktarda işaretlemeye ihtiyacınız vardı. Bootstrap 4’te geliştirme ekibi, bir nav veya div HTML öğesi kullanarak süreci basitleştirir. Bootstrap 4 ayrıca görüntüleme seçeneği için satır içi blok kullandı ancak bootstrap 5 bunu kaldırdı. Bunun dışında, açılır menüyü siyah bir arka plana dönüştüren bir açılır menü-karanlık sınıfı kullanarak karanlık bir açılır menü eklediler.

8. Özelleştirilmiş SVG simgesi Kitaplığı:

Bootstrap 3, “Glyphicons” olarak bilinen yaklaşık 250 yeniden kullanılabilir simge bileşeni sağladı. Giriş gruplarına uyarı bırakma dansı ve diğer önyükleme öğeleri için ikonografi sunarlar. Ancak, bootstrap 4 onu tamamen rafa kaldırdı ve geliştiriciler ücretsiz simgeler kullanmaya başladı. Ancak bootstrap 5’te yepyeni bir SVG simge kitaplığı başlatıldı. Bootstrap’ın kurucu ortağı Mark Otto bu kitaplığı yarattı.

9. Jekyll’den Hugo’ya geçiş yapın:

Jekyll, ücretsiz, açık kaynaklı bir statik web sitesi oluşturucusudur. Bir geliştirici WordPress, Joomla Drupal’ın nasıl çalıştığını biliyorsa, Jekyll ile çalışmak kolaylaşır. Jekyll, kolay gezinme ve web sitesi öğelerine sahip web siteleri oluşturmaya yardımcı olur. Tüm içeriği tek seferde oluşturduğu da bilinmektedir. Bootstrap 4, sözdizimsel olarak harika stil sayfaları (Sass) kullanarak Jekyll ile iyi bir şekilde entegre edildi. Bootstrap 5’in piyasaya sürülmesiyle, çerçeve Jekyll’den Hugo’ya geçti. Hugo, “GoLang’da spf13 tarafından oluşturulmuş hızlı ve esnek bir statik site oluşturucudur.” Anahtarın arkasındaki neden, Hugo’nun ışık hızında ve kullanımı kolay yapılandırmasıdır.

10. Sınıf Güncellemeleri:

Bootstrap 5, CSS sınıflarını korudu. Onlar olmadan, bootstrap ilgi çekici olmayacaktır. Bootstrap 4, 1500’den fazla CSS sınıfına sahiptir. Ancak bootstrap 5’in piyasaya sürülmesiyle bazı sınıflar eleme ile karşı karşıya kaldı. GitHub proje takip panosuna göre bunlar aşağıdaki gibidir:

Form satırı Form satır içi Liste satır içi kart destesi

Bootstrap 5’e eklenen sınıflar şunlardır:

gx-* sınıfları yatay/sütun oluk genişliği ölçümlerini yönetecek gy-* sınıfları dikey/sıra oluk genişliğini idare edecek g-* sınıfları yatay/dikey oluk genişliğini kontrol edecek row-cols-auto

Sonuç:

Bir geliştirici için yapması gereken en zor şey, her proje için temel HTML, CSS ve JavaScript’i oluşturmaktır. Bazı geliştiriciler kodlarını yazıyor olsa da, Bootstrap gibi mevcut bir çerçeveyi kullanmak yine de anlamlı görünüyor. Bootstrap 5 güncellemelerine bakıldığında, bootstrap ekibinin çerçeveyi hafif, basit ve hızlı tutmak için büyük değişiklikler yaptığı açıkça görülüyor.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz