Home-theater-designers
Bootstrap 5, Internet Explorer (IE) desteğinin düşürülmesi ve jQuery bağımlılığı dahil olmak üzere büyük değişikliklerle geldi. Twitter tarafından geliştirilen Bootstrap, dünyanın en popüler CSS çerçevesidir. Açık kaynaklı kullanıcı arayüzü çerçevesi, kendisini gelecek için konumlandırmaya bakıyor ve bu, v5'te çığır açan değişiklikler yaptığını gördü.
Bootstrap'in IE için düşüşü, onu bunu yapan ilk web geliştirme aracı yaptı. Hareket, Internet Explorer'ın pazar payı azalmaya devam ederken, tüm web tarayıcılarının %3'ünden daha azını oluştururken geldi.
Bootstrap'te daha fazla iyileştirmenin yapıldığını ve bunların sizi nasıl etkilediğini görmek için okumaya devam edin.
1. jQuery Desteği
Bootstrap artık jQuery kitaplığını kullanmayacak. Geliştirme ekibi, bu değişikliği gerçekleştirmek için JavaScript kitaplığını geliştirdi. Bootstrap'ta jQuery bağımlılığı mutlaka kötü bir şey değildi.
Aslında, jQuery'nin tanıtılması JavaScript'in nasıl kullanıldığını kökten değiştirdi. Aksi takdirde birçok kod satırı alacak olan JavaScript'teki yazma görevlerini basitleştirdi.
İlgili: jQuery'de Element Oluşturmayı Öğrenin
Tüm bunlara rağmen, ekip bunu ortadan kaldırmaya karar verdi. Bu, daha küçük kaynak dosyaların ve daha yüksek sayfa yükleme sürelerinin avantajıyla birlikte gelir. Bu, Bootstrap'in daha geleceğe yönelik bir stil kazanmasını sağlayacak çok ihtiyaç duyulan bir değişiklikti.
Kaynak dosya boyutu 85 KB küçültülmüş JavaScript ile daha hafif hale geldi ve Google, mobil siteler için sayfa yükleme sürelerini bir sıralama faktörü olarak gördüğü için bu çok önemli.
Bootstrap 5'te artık jQuery kullanımına gerek kalmasa da dilerseniz yine de kullanabilirsiniz. Tüm JavaScript eklentilerinin kullanılabilir durumda kaldığını da belirtmekte fayda var.
2. CSS Özel Özellikleri
Internet Explorer desteği kaldırılarak özel CSS özellikleri (değişkenler) kullanılabilir. IE, özel özellikleri desteklemez - web geliştiricilerini uzun süre geride tutmasının yalnızca bir nedeni.
CSS özel özellikleri, CSS'yi daha esnek ve programlanabilir hale getirir. CSS değişkenlerinin önüne şu şekilde eklenir: -bs üçüncü taraf CSS ile çakışmayı önlemek için.
Kullanılabilir iki tür değişken vardır: kök değişkenler ve bileşen değişkenleri.
Kök değişkenlere Bootstrap CSS'nin yüklendiği her yerden erişilebilir. Bu değişkenler, _root.scss dosya ve derlenmiş dağıtım dosyalarının bir parçasıdır.
Bileşen değişkenleri, belirli bileşenlerde yerel değişkenler olarak kullanılır. İç içe tablolar gibi bileşenlerde stillerin yanlışlıkla devralınmasını önlemeye yardımcı olurlar.
3. Geliştirilmiş Izgara Sistemi
Sürüm 3'ten 4'e yükseltme yaparken bazı sorunlar olduğu için, Bootstrap 5 bu sefer sistemin büyük bir kısmını elinde tutuyor ve sistemi tamamen değiştirmek yerine mevcut sistem üzerine inşa ediyor. Değişikliklerden bazıları şunlardır:
- oluk sınıfı ( .erkekler ) bir yardımcı programla değiştirildi ( .G* ) kenar boşluğu ve dolgu gibi
- Dikey boşluk sınıfları da dahil edilmiştir
- Sütunlar artık varsayılan konum:göreceli
4. İyileştirilmiş Dokümantasyon
Belgeler, özellikle özelleştirme söz konusu olduğunda daha fazla bilgi ile geliştirilmiştir. Yaygın bir sorun, Bootstrap kullanan birçok sitenin Bootstrap kullandığını hemen anlayabilmenizdi. Bootstrap 5 şimdi yeni bir görünüm ve hisle ve daha iyi özelleştirmeyle geliyor.
Artık temalarınızı özelleştirmek için daha fazla esneklik var, böylece her site veya uygulama aynı benzerliğe sahip değil. v4 tema sayfası, Sass (popüler CSS ön işlemcisi) dosyalarının üzerine inşa etmek için daha fazla içerik ve kod parçacığı ile genişletildi. Şablon deposu olarak kullanılabilen GitHub platformunda bir başlangıç npm projesi de bulabilirsiniz.
Renk paleti de sürüm 5'te genişletilmiştir. Genişletilmiş yerleşik renk sistemi, kod tabanınızdan ayrılmak zorunda kalmadan renklendirmenizi kolayca şekillendirebileceğiniz anlamına gelir. Bootstrap renk belgelerine bir renk kontrastı metriklerinin eklenmesi de dahil olmak üzere, renk kontrastını iyileştirmek için daha fazla çalışma yapılmıştır.
5. Geliştirilmiş Form Kontrolleri
Bootstrap, form denetimlerini, giriş gruplarını ve daha fazlasını geliştirdi.
v4'te Bootstrap, her tarayıcı tarafından sağlanan varsayılanlara ek olarak özel form denetimleri kullanıyordu. v5'te bunların hepsi artık özelleştirilmiştir. Farklı tarayıcılarda aynı görünümü ve davranışı sağlamak için tüm radyo düğmeleri, onay kutuları, dosya, aralık ve daha fazlası.
Yeni form denetimleri artık gereksiz renkli işaretlemeler içermiyor, bunun yerine standart ve mantıksal tasarım özelliklerine odaklanıyor.
6. Bootstrap 5, Yardımcı Programlar API'sini Ekler
Tailwind CSS gibi yeni CSS kitaplıklarının ardından Bootstrap artık bir yardımcı program kitaplığı da ekliyor. Önyükleme ekibi, diğer geliştiricilerin son on yıldan fazla bir süredir web'de oluşturduğumuz yola nasıl meydan okuduğunu görmekten mutlu olduklarını söylüyor.
Kamu hizmetleri geliştirme topluluğunda ivme kazanıyor ve önyükleme ekibi bunu fark etti. Ekip daha önce global kullanarak v4'te yardımcı programlar için provizyon eklemişti. $etkinleştir-* sınıflar. v5'te, bir API yaklaşımına ve Sass'ta yeni bir dil ve sözdizimine geçtiler. Bu size, verilen varsayılanları kaldırmaya veya değiştirmeye devam ederken yeni yardımcı programlar oluşturma gücü verecektir.
Daha iyi bir organizasyon sağlamanın bir yolu olarak, v4'teki bazı yardımcı programlar Yardımcılar bölümüne taşındı.
7. Yeni Önyükleme Simgesi Kitaplığı
Bootstrap artık 1300'den fazla simgeyle kendi açık kaynaklı SVG simge kitaplığına sahiptir. Çerçevenin bileşenleri için özel olarak üretilmiştir ancak yine de herhangi bir projede onlarla çalışabilirsiniz.
SVG görüntüleri oldukları göz önüne alındığında, hızlı bir şekilde ölçeklenebilirler ve birçok şekilde uygulanabilirler ve ayrıca CSS ile şekillendirilebilirler.
Simgeleri kullanarak yükleyebilirsiniz. Deniz seviyesinden yukarıda:
$ npm i bootstrap-iconsBootstrap 5'i yükleyin
şuraya gidebilirsin Bootstrap 5 resmi indirme sayfası yüklemek isterseniz. En son geliştirme sürümünden haberdar olmak istiyorsanız, kullanabilirsiniz. Deniz seviyesinden yukarıda çekmek için:
$ npm i bootstrap@next
Bu yazının yazıldığı sırada, çerçeve Beta 3 sürümündedir. Bu, yazılımın kullanımının güvenli olduğu ancak hala geliştirilmekte olduğu anlamına gelir. Ekibe geri bildirim vermekten ve gerekli katkıyı yapmaktan çekinmeyin.
Paylaş Paylaş Cıvıldamak E-posta Web Bileşenlerine ve Bileşen Tabanlı Mimariye GirişOrtak web bileşenlerine bir göz atalım ve neden yararlı olduklarını görelim.
Sonrakini Oku İlgili konular- Programlama
- Web Geliştirme
- JavaScript
- CSS
Jerome, MakeUseOf'ta Personel Yazarıdır. Programlama ve Linux ile ilgili makaleleri kapsar. Aynı zamanda bir kripto meraklısı ve kripto endüstrisini her zaman takip ediyor.
Jerome Davidson'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
xbox one'da bluetooth kulaklık nasıl kullanılırAbone olmak için buraya tıklayın