Bootstrap ilk yayınlandığı Ağustos 2011’den itibaren web tasarım ve geliştirme dünyasında popülerlik kazanmıştır. Tamamen CSS temelli stil sayfalarından, formlar ve diğer bazı bileşenlerle el ele giden Javascript pluginler, araçlar ve simgeler içeren çok sayıda yeni özelliğin eklendiği güçlü, mobil öncelikli, responsive bir front-end framework’üne giden süreçte Bootstrap’ın çok yol kat ettiği söylenebilir.
Bu yazının yazıldığı tarih itibarıyla, Bootstrap 5, henüz tamamlanmamış ve üretim için uygun olmayan alfa sürümündedir. Bu sürüm önemli değişiklikler getiriyor. Çok sayıda yeni özellik ve özelleştirme seçenekleri eklenmiştir.
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.
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:
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 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.
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.
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;
}
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.
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.
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 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.