Bootstrap 4 ile neler beklenir?

Son birkaç yılda Bootstrap çok popüler hale geldi. Bootstrap öğelerini içeren WordPress temalarıyla karşılaşmanız veya oluşturmanız için iyi bir şans var. Temel bir önceden duyarlı çerçeveden sağlam, zengin özelliklere sahip ve modern bir duyarlı çerçeveye dönüşmüştür. Bootstrap 3 bir süredir piyasada, bu yüzden Bootstrap 4'te sırada ne olduğunu öğrenmek heyecan verici.

Önyükleme Durumu 4

Bootstrap 4 şu anda yapım aşamasında ve henüz üretimde kullanılmaya hazır değil. Şu anda alfa sürümünde. Bu, gelecekteki projelerde size nasıl yardımcı olacağını önceden görmek ve aşina olmak için iyi bir fırsattır.

Bootstrap 4 belgeleri henüz tamamlanmadı, bu nedenle deneme, bazı yeni özellikleri test etmenin iyi bir yoludur. Resmi olarak üretimde kullanıma sunulduğunda, tüm harika yeniliklerden haberdar olacaksınız.

Modern tarayıcılar için tasarlandı

Web'de ilerledikçe, web geliştirmenin sunduğu en yeni ve en iyileri kullanırken eski tarayıcıları desteklemek giderek zorlaşıyor. Bu kulaklarınıza müzik olsun ya da olmasın, modern tarayıcılarla çalışırken daha iyi CSS3 tekniklerinin daha kolay hale getirildiği konusunda hepimiz hemfikiriz. Bootstrap 4, eski tarayıcılardan temiz bir şekilde ayrılmanın mükemmel bir yolu olabilir. Bu güncelleme ile Internet Explorer 8 desteği tamamen kaldırılmıştır. Çerçevenin hala Internet Explorer 9'u desteklediğini ve CSS3'ü pek çok sorun olmadan desteklediğini unutmayın.

Geliştirilmiş Sıfırlama

Muhtemelen harika bir sıfırlama seçeneği olan Normalize.css'ye alışmışsınızdır. Yeniden başlatma.css adı verilen, Bootstrap'a özel şeyler eklenen yeni ve geliştirilmiş bir sıfırlama var. Önyükleme özellikleri, kutu boyutlandırma gibi şeylerdir: kenarlık, ölçü birimi olarak rems, bağlantı stilleri ve form stilleri. Normalize.css ve belirli Bootstrap ihtiyaçları arasında harika bir karışımdır, bu nedenle harika bir başlangıç ​​yapacağınızdan emin olabilirsiniz.

SASS

Bootstrap'in önceki günlerinde LESS'in tercih edildiği görülüyordu. SASS'a doğru eğilen endüstri değişiklikleri ve tasarımcı tercihleri ​​ile, şu anda lehte olan şey budur. Sürüm 3'e geri dönerseniz, o zaman SASS seçeneği, bağlantı noktası seçeneğiyle birlikte kullanılabilir hale geldi. Şu an itibariyle, LESS için planlanmış bir destek bulunmamaktadır.

özelleştirmeler

Bootstrap 4, tümü düzenli bir şekilde yapılan özel tasarımlarınızı oluşturmayı kolaylaştırır. Tüm değişken seçenekler tek bir dosyada birleştirilir. SASS kolayca derlenebilir ve geçmişte olduğu gibi ayrı bir stil sayfasına gerek yoktur.

Bootstrap 4'te epeyce yeni özelleştirme seçeneği var. Mevcut durumu burada görebilirsiniz. Ayrıntılar yayınlanmaya devam ettikçe büyük olasılıkla biraz gelişecektir.

Bunların başlangıçta ayarlanması kolay özelleştirmeler olduğunu unutmayın:

• Gövde varsayılanları
• Renk değişkenleri
• esnek kutu
• Geçişler, yuvarlatılmış köşeler, alt gölgeler vb. gibi CSS3 tasarım seçenekleri.
• Aralık ölçümleri
• Bağlantı stilleri
• ızgara kesme noktaları
• ızgara kapları
• ızgara sütunları
• Tipografi boyutlandırma
• Bileşenler
• tablolar
• Daha!

Flexbox kimse var mı?

Flexbox'ın popülaritesi kesinlikle arttı ve bunu kullanan daha fazla web tasarımcısı göreceğiz. CSS stiliyle basit ve esnek düzen seçenekleri sağladığı için kullanmak için harika bir araçtır. Bir ana öğe içindeki içeriğin dikey olarak hizalanmasının kolaylığını, medya sorgularının yardımıyla içeriği cihazlar ve ekran çözünürlükleri arasında yeniden sıralamanın kolaylığını ve ızgaranızda eşit yükseklikte sütunlara sahip olmanın kolay bir yolunu takdir ettiğinizi düşünüyorsanız, Flexbox harika bir çözümdür. .

Tüm projelerinizi bitirmeden ve dönüştürmeden önce, bahsetmeniz gereken önemli bir şey var. Tarayıcı desteği büyük ölçüde artmış olsa da, Internet Explorer 9 hala Flexbox desteğinden yoksundur. Kullanım kolaylığı açısından Bootstrap 4, IE9 desteğine ihtiyacınız yoksa Flexbox'ın kullanımını kolaylaştırır. Esasen, tek yapmanız gereken _variables.scss dosyasını bulmak ve $enable-flex'i false'tan true'ya değiştirmek. SASS'a aşina iseniz, bu yapılacak hızlı bir şeydir.

Izgara güncellemeleri

Uzun süredir Bootstrap hayranıysanız, muhtemelen ızgara sisteminin ve adlandırma kuralının nasıl çalıştığı konusunda uzmansınız. Bootstrap 4 ile sözdizimi aynı kalır, ancak kullanılan ölçümlerde bir fark vardır. Izgara sistemi artık “rems” üzerine kuruludur. Mükemmel tasarımları piksellemeye alışkınsanız, bu bir ayardır, çünkü artık işler daha akıcı olacaktır.

Çok alıştığımız piksellerle ayrılırken, .container ve .row. Konteyner artık rem olarak ayarlanmış bir maksimum genişliğe sahiptir. Bir satırın varsayılan negatif sol ve sağ marjı -.9375rem iken, sütunların varsayılan sol ve sağ dolgusu 0.9375rem . Hatırlayacağınız gibi bu değerler Bootstrap 3'te daha önce 15px idi. Bu yeni rem değerleri buna benzer.

Gelişmiş medya sorguları

Bootstrap'in önceki sürümlerinde medya sorguları biraz geneldi ve bazen özel sorgular oluşturulması gerekiyordu. İşte neye benziyorlardı:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Şimdi, bu güncellenmiş medya sorgularıyla daha mobil bir yaklaşım benimsenebilir:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Farklı bir şey isterseniz, kendinizinkini seçmek isterseniz kesme noktaları SASS'ta yapılandırılabilir.

Yedek olarak kartlar

Paneller, kuyular ve küçük resimlere aşina mısınız? Kartlar artık en yeni ve en iyiler ve bazı harika stil seçenekleri sunuyor. Bir örnek Kart Gruplarıdır. Metin miktarı değişse de, kartlar JavaScript'e bağlı olmaksızın eşit yüksekliktedir. Bu, hem Flexbox hem de varsayılan ızgara modu ile çalışır. Flexbox kullanılırken, kartlar Flexbox özellikleri kullanılarak oluşturulur. Varsayılan ızgara, JavaScript ihtiyacını önlemek için bir CSS numarası kullanır. Kap, display: table; ve her "kart" display: table-cell; ona tablo özelliklerini vererek – eşit sütun yüksekliğinin geldiği yer burasıdır.

tipografi

Izgaranın artık remleri nasıl kullandığını hatırlıyor musunuz? Eh, sadece tipografinin bunu yapması mantıklı! Bunu düşünürken, tüm yazı tipi boyutlarının HTML etiketi olan kök öğeye göre olduğunu unutmayın. HTML etiketindeki yazı tipi boyutunu (veya diğer stilleri) değiştirdiğinizde, projeniz boyunca stilleri kolayca stillendirebilir ve ölçeklendirebilirsiniz.

HTML öğenizin bir font-size: 16px ile stillendirildiğini varsayalım. Diyelim ki h5 etiketlerinizin bu boyutta olmasını istediniz, yazı tipi boyutunu 1rem olarak bildirirsiniz.

h5 {
font-size: 1rem;
}

Şimdi, ilerlemeyi içeren bazı matematik olabilir. h1 etiketlerinizin 40 piksel olmasını istiyorsanız, bunu nasıl çözeceğiniz aşağıda açıklanmıştır:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

Henüz rem hissetmiyor musun? İsterseniz boyutlandırma için piksel ve ems kullanabilirsiniz.

Daha fazla başlık stili

Başlıklar hiyerarşi oluşturmak için harikadır. Ama ya h1, h2, h3 vb.'den daha belirgin bir şey istiyorsanız? İyi haber şu ki, onu daha büyük yapan standart bir başlığa bir ekran başlığı sınıfı ekleyebilirsiniz. Şuna benzer bir şey olurdu:

<h1 class="display-4">Heading Display 4</h1>

display-4 , display-2 daha büyüktür.

Daha küçük dosya boyutu

Bootstrap 4 daha küçük bir ayak izine sahiptir. Aslında en son sürüm olan Bootstrap 3'ten yaklaşık %30 daha küçüktür. Önceden ~123kb civarındaydı ve şimdi ~88kb. Daha küçük olması ve hala aynı harika özelliklere sahip olması harika.

Bootstrap'in yalnızca ihtiyacınız olan ve dosya boyutlarını daha da küçülten kısımlarını kullanma seçeneğinin olduğunu unutmayın.

Artık Glyphicon yok mu?

Glyphicon'lar Bootstrap'ın önceki sürümlerinde yaygın olarak kullanılıyordu, bu yüzden onların gittiğini görmek üzücü. Endişelenme, bu web simgelerinin sonu değil. Onun yerine FontAwesome size de hizmet etmelidir. Harika simge seçenekleri için Github'ın Octigons'una da göz atabilirsiniz.

Bootstrap 4'e geçiş

Şu anda alfa aşamasındayken, onunla test ortamında çalışamamanız için hiçbir neden yok. Kaynak kodu GitHub'da bir v4-dev dalında mevcuttur. Dikkat gerektiren herhangi bir şey denediğinizde ve gördüğünüzde, değişiklikler ve diğer yeni geliştirmelerle ilgili notları içeren bir geliştirme ve izleme çekme isteği vardır.

Her şey alfa aşamasında ve özellikler ve işlevler test edilmeye hazır olduktan sonra sonunda beta sürümleri olacak. Betadan sonra, üretimdeki şeyleri test etmek için iki sürüm adayı kullanılacak. Her şey yolunda gittiğinde, son sürüm hazır olacak!

Burada yüzeyi biraz önce çizdik ve Bootstrap 4 sohbeti daha yeni başladı. Geleceğin neler getireceğini görmek heyecan verici ve bunun alfadan çıktığını görmek beni heyecanlandırıyor. Yeni Bootstrap 4 bileşenlerini test etmek için güncellemeleri takip ettiğinizden ve bir kopyasını indirdiğinizden emin olun.