Her Web Yazılımcı ve Tasarımcı Bootstrap’ı Rahatlıkla Kullanabilir
Hangi CSS framework’ün en iyisi olduğu hakkında tartışma olabilmesine rağmen hemen hemen her web tasarımcı, hatta varsayılan Bootstrap stilini yeniden yapılandırmak için biraz zaman harcarlarsa eleştirmeneler bile, Bootstrap ile bir şeyler ortaya çıkarabilir.
Tasarımcılar Bootstrap’ı Neden Seviyor?
Eğer bir tasarımcıysanız muhtemelen Bootstrap framework temelli tasarımlar yapmaktan keyif alıyorsunuzdur. Tasarımcıların Bootstrap’ı sevmesinin nedenlerinden bazıları aşağıda listelenmektedir:
- ÜCRETSİZ: Bootstrap açık kaynaktır. Kredi kartınıza müracaat etmenizi gerektirmez.
- Güçlü Grid Sistemi: Bootstrap mevcut olan en iyi responsive, mobil öncelikli grid sistemine sahiptir. Kolay kullanımı ve esnekliği kolayca prototip düzenlemeleri üretmenize ve özelleştirmeler yapmanıza izin verir.
- Özelleştirme: Bootstrap tam olarak özelleştirilebilir. Bunun anlamı basit görünümlü Bootstrap şablonları yerine farklı tasarımlar oluşturabilecek olmanızdır. Tüm CSS ve JavaScript’in üzerine yazılabilir, bu nedenle kendisiyle çalışmak son derece sorunsuzdur.
- Hızlı Geliştirme: Bootstrap tasarımcıların tasarımları için ihtiyaç duydukları işlevselliği ve ögeleri kolayca oluşturmasına yardımcı olabilen CSS ve JavaScript bileşenleri sunar.
- Mükemmel dokümantasyon: Bootstrap’ın ister yeni başlayan ister profesyonel olun framework’ün herhangi bir kısmını anlamanıza yardımcı olan istisnai kalitede dokümantasyonu vardır.
Tasarımcıların Bootstrap 4 Hakkında Bilmesi Gereken Şeyler
Bir tasarımcı olarak yeni özellikleri ve güncellemeleri incelemeye değer. Bootstrap için web siteleri tasarlamak için farklı düşünebilirsiniz ama Bootstrap temelli web siteleri tasarlarken ihtiyaç duyacağınız şeyleri bilmek ve anlamanın zaman kaybı olduğunu düşünmüyoruz.
Bootstrap’ta Renkler
Bootstrap 4 başlıca beş renk ile gelir. Bu renkler butonlar, bağlantılar ve uyarılar gibi farklı bileşenlerde tekrar kullanılabilen ilgili sınıflarıyla gelir. Aşağıdaki resmi inceleyiniz.
Not: Bootstrap 3’te, “btn-secondary” sınıfı “varsayılan” sınıftır.
Grid Sistem Artık Pixel Değildir
Bootstrap 1-3 sürümlerinde grid’ler pixel’ler vasıtasıyla ölçülüyordu. Ancak, Bootstrap 4’te grid’ler ems ve rems vasıtasıyla ölçülmektedir. Bu şekilde, bir web sitesinin Photoshop düzenlemesi üzerinde çalışıyorsanız ems – pixel denk ölçümlerini görmek oldukça faydalı olacaktır.
Gutter
Bootstrap genellikle, bir sütunun her tarafında 15px olacak şekilde 30 genişlikte gutter ile gelir. Bunun anlamı sütun için sağ ve sol padding değerlerinin her tarafta 15px olurken satır için sol marj ve sağ marj değerlerinin 15px olacağıdır. Bu size tasarımlarınızda her sütuna nasıl boşluklar ekleyeceğiniz konusunda bir fikir verir.
Bootstrap 4 hakkındaki iyi bir şey de, ihtiyaçlarınıza uygun olarak kendi tasarımınızı özelleştirme ve derlemenize izin vermesidir. Bu renk, konteyner boyutu ve gutter padding değerlerini içerir. Genellikle CSS ile sütun seçmek ve padding’leri kaldırmak istersiniz. Bunu hızla elde etmek için kendi yardımcı sınıfınızı oluşturabilirsiniz. Aşağıdaki örnek kodu inceleyin.
.no-gutter > [class*=`col-`] {
padding-right:0;
padding-left:0;
}
İyileştirilmiş Navbar
Bootstrap 3’ü kullanmanın en zor ve en incelikli kısmı navbar’dır. Bunun nedeni sadece oluşturmak için bile çok sayıda sınıf eklemeniz gerekmesidir. Bundan başka, renkleri ve bazı stilleri özelleştirmek için CSS’nize müracaat etmeniz gerekir.
Bootstrap 4’te ortadan kaldırılan çok sayıda sınıf olup renk şemaları için daha fazla seçenek eklenmiştir. Bu size web sitesinin navigasyonunu kontrol etme konusunda daha fazla seçenek sunar. Ayrıntılı bilgi için sitesindeki dokümantasyonu inceleyebilirsiniz.
Responsive Tasarım için Flexbox Onayı Etkinleştirilebilir
Bootstrap 4 kullanıcıların CSS3’ün Flexbox Düzeni modunu kullanmasına imkan verir. Flexbox responsive amaçları için bir sayfadaki ögelerin düzenlenmesine imkan veren bir düzenleme modudur. Farklı çözünürlüklerde ögeleri genişletebilen ya da daraltabilen esnek bir konteyner sunar.
Bu özellik tasarımlarını responsive yapmaya çalışan tasarımcılar için harika olmasına rağmen sadece Internet Explorer 9 sonrası tarayıcılarda çalışacaktır.
LESS Yerine SASS Kullanan Optimize Stiller
Bootstrap 3 ana CSS ön-işlemcisi olarak LESS kullanıyordu, ama popüler front-end geliştiricilerinin katkısı sayesinde Bootstrap 4’te C/C++ ile yazılmış Librass Sass Derleyicisi vasıtasıyla SASS’a dönülmüştür.
Artık renk, boşluk, bağlantı stili, tipografi, tablolar, grid kırılma noktaları ve konteynerler gibi stilleri variables.scss dosyasıyla özelleştirebilirsiniz.
Bootstrap: Sonuç
Bootstrap responsive, mobil öncelikli web siteleri ortaya çıkarmak için mevcut olan birçok framework’ten sadece biri olmasına rağmen tasarımcılara çok sayıda seçenek sunar. Güncellemeler ve yeni bileşenler hakkında bilgi sahibi olmak bunların çok daha kolay ortaya çıkarılmasını sağlayacaktır.
