Bootstrap 4 Seveceğiniz Yeni ve Harika Özellikler

Bootstrap çerçevesinin bir sonraki ana sürümü köşede. Alfa sürümü, Bootstrap'ın geliştirme web sitesinden zaten indirilebilir ve kaynak kodu Github'da da mevcuttur..

Twitter Bootstrap şu anda orada en popüler ön uç çerçevedir. Geliştiricilere sağlar mobil ilk ve hızlı yanıt veren web sitelerini hızlı bir şekilde oluşturun. Bootstrap, standart HTML5, CSS3 ve Javascript frontend trio'yu akıllıca kullanmanızı mümkün kılar. Şu anda web üzerinde 6 milyondan fazla site tarafından kullanılıyor.

Bootstrap 4 hala geliştirme aşamasında olmasına rağmen (henüz canlı bir sitede kullanmayın), geliştiriciler harika bir iş çıkardılar. Bu yazıda kesinlikle çok güzel özellikler içeren yeni sürüme göz atacağız. Ön uç geliştirme iş akışını kolaylaştırın ve iyileştirin.

1. LESS Yerine Sass

Şimdiye kadar Bootstrap, LESS'i ana CSS önderi olarak kullandı, ancak yeni ana sürüm için stil kuralları, öndeki geliştiriciler arasında çok daha popüler olan Sass'a yeniden eklenecek, genellikle kullanımı daha kolay olan ve daha fazlasını sunan büyük bir katılımcı tabanına sahip olacak. olasılık. C / C ile yazılmış güçlü Libsass Sass Complier sayesinde++ Bootstrap 4 çok daha hızlı derlenir öncekinden.

2. Küçük Ekranlar İçin Yeni Izgara Katmanı

Bootstrap, geliştiricilerin farklı görünüm alanlarına sahip cihazları hedeflemelerine olanak veren sofistike bir duyarlı ızgara sistemine sahiptir. Bootstrap 3 şu anda sütunlar için 4 ızgara sınıfına sahiptir, .col-xs-XX cep telefonları için, .col-sm-XX tabletler için, .col-MD-XX Masaüstleri için .col-lg-XX daha büyük masaüstleri için. Bootstrap 4, ızgara sistemini geliştiricilerin geliştirmesini kolaylaştıracak beşinci sistemle geliştirecek 480 piksel vizör genişliği altında daha küçük cihazları hedefleyin.

Yeni ızgara sınıfı, en küçük olanın adını aldı ve kılavuzun geçerli adlarını bir derece yukarı doğru itti. Bootstrap 4'te büyük masaüstleri .col-xl-XX sınıf seçici Yeni isme rağmen ekstra büyük ekranlar için yeni bir sınıf eklemediklerini, ekstra küçük ekranlar için olduğunu bilmek önemlidir.

3. Göreli CSS Birimlerini Sunuyor

Bootstrap 4 sonunda Internet Explorer 8'in desteğini düşürdü. Bu gerçekten sinir bozucu polyfilllerden kurtulmalarını ve göreli CSS birimlerine dönüşmelerini sağlayan akıllıca bir adım. Piksel yerine, yeni ana sürüm REM’leri ve EM’leri kullanın mümkün kılan duyarlı tipografi uygulamak Bootstrap sitelerinde. Bu aynı zamanda okunabilirliği artıracak ve sitelerin engelli kullanıcılar için daha erişilebilir olmasını sağlayacaktır..

Göreceli birimlerin yeni Bootstrap 4 ile nasıl çalıştığını denemek istiyorsanız, Codepen'deki bu gösterime göz atın..

4. Yepyeni Bootstrap Kartları

Geliştirme ekibi, Bootstrap'ın kullanıcı arayüzünün önceki bazı unsurlarını birleştirmeye karar verdi. Kartlar adı verilen yeni UI bileşeni. Kartlar eski kuyucukların, küçük resimlerin ve panellerin yerini alacak ve kullanıcılara daha düzenli bir iş akışı sağlayacak. Endişelenmeyin, kartlar başlıklar, üstbilgiler ve kuyu altbilgileri, küçük resimler ve paneller gibi tanıdık öğeleri koruyacak.

Kartlar mevcut UI bileşenlerinden daha esnek olacağından, yaratıcı uygulamalar için daha büyük bir alana izin vereceklerdir. Orada zaten Bootstrap Kartları ile Codepen üzerinde deneyler yapmış bazı öncüler var. Onları kontrol edebilir veya kendi kartlarınızı oluşturabilirsiniz.

5. Yeni Yeniden Başlatma Modülü

Yeni Reboot modülü önceki normalize.css sıfırlama dosyası. Onu hendek değil; Aksine, üzerinde daha fazla kural oluşturur. Hareketin amacı, tüm genel CSS seçicilerini dahil etmek ve stilleri sıfırlamaktı. tek, kullanımı kolay SCSS dosyası. Yeni modülün nasıl çalıştığını daha iyi anlamak istiyorsanız, burada kaynak koduna göz atabilirsiniz..

Yeni sıfırlama stillerinin kutu boyutlandırma CSS özelliğini akıllıca ayarladığını bilmek güzel border-box üzerinde Bu nedenle, sayfadaki her alt öğe tarafından miras alınan öğe. Yeni stil kuralı duyarlı mizanpajları daha yönetilebilir kılar. İçerik kutusu ve kenar kutusu düzeni türleri arasındaki farkı yaşamak istiyorsanız, CSS-Tricks.com (Bootstrap 4 için oluşturulmuş değil) tarafından sunulan bu kullanışlı gösterime bakın. genellikle çalışır).

6. Esnek Flexbox Desteği

Bootstrap 4, CSS3'ün Flexbox Layout'undan faydalanmayı mümkün kılar, ancak - Internet Explorer 9 flexbox modülünü desteklemediğinden - Bootstrap 4'ün varsayılan sürümü Sıvı düzenini uygulamak için şamandıra ve görüntü CSS özelliklerini kullanır.

Flexbox, mevcut alanı en iyi şekilde doldurmak için kendisini genişleten veya daralan esnek bir kap sağladığı için, duyarlı tasarımda mükemmel bir şekilde kullanılabilen, kullanımı kolay bir düzen içerir. Kaydolma esnek kutusu özelliğini yalnızca yapamaz IE9 için destek sağlamanız gerekir.

7. Kolaylaştırılmış Değişken Özelleştirme

Yeni Önyükleme sürümünde kullanılan tüm Sass değişkenleri, geliştirme işlemini önemli ölçüde kolaylaştıracak _variables.scss adlı tek bir dosyada bulunur. Ayarları bu dosyadan başka bir dosyaya kopyalamaktan başka bir şey yapmanız gerekmez. _custom.scss varsayılan değerleri değiştirmek için.

Yapabilirsin birçok şeyi özelleştir renkler, boşluklar, bağlantı stilleri, tipografi, tablolar, ızgara sınır değerleri ve kaplar, sütun sayısı ve oluk genişliği ve diğerleri gibi.

8. Boşluk için Yeni Hizmet Sınıfları

Bootstrap 3 zaten, yüzmeyi veya clearfix'i değiştirenler gibi birçok pratik uygulama sınıfına sahiptir, ancak Bootstrap 4 daha da fazlasını ekler. yeni boşluk sınıfları geliştiricilerin sitelerindeki dolguları ve kenar boşluklarını hızlı bir şekilde değiştirmelerine izin verme.

Yeni sınıfların sözdizimi oldukça basittir; örneğin; .m-a-0 sınıfı bir stil kuralını bağlar marjları verilen öğenin her tarafında 0'a ayarlar (margin-all-0). Kenar boşlukları m- önek, dolgular ile tarz p- önek. Geliştirme belgelerinde, tüm yeni aralık yardımcı programı sınıflarına göz atabilirsiniz..

9. İpliklerle Desteklenen Araç İpuçları ve Popoverler

Bootstrap 4 araç ipuçları ve çubukları, aynı sayfadaki başka bir öğenin hemen yanında kesinlikle konumlandırılmış bir öğeyi tutmayı mümkün kılan bir konumlandırma motoru olan supercool Tether kütüphanesini kullanır. Bu araç ipuçları ve popovers anlamına gelir otomatik olarak doğru yerleştirilecektir Bootstrap 4 web sitelerinde.

Tether üçüncü taraf bir JavaScript kütüphanesi olduğundan, bootstrap.js dosyanızdan önce HTML’ye ayrı olarak eklemeniz gerektiğini unutmayın.

10. Refactored JavaScript Eklentileri

Geliştirme ekibi, EcmaScript 6'yı kullanarak yeni sürüm için her JavaScript eklentisini yeniden düzenledi. En yeni özelliklerin akıllıca kullanımı ve ön uç deneyimini geliştirmek istedikleri en yeni geliştirmelerle.

Yeni Önyükleme 4 de, örneğin, diğer JavaScript geliştirmelerinden geçti. seçenek türü kontrolü, genel yırtılma yöntemleri, ve UMD desteği, tüm bunlar, en popüler ön uç çerçevenin hiç olmadığı kadar sorunsuz çalışmasını sağlamak için birlikte çalışacak.

Şimdi Oku: Bootstrap & Foundation'a 10 Hafif Alternatif