Tasarımcıların Bootstrap 4 Hakkında Bilmesi Gerekenler

Bootsrap 4 ile web tasarımcı ve web yazılımcı topluluğu için birçok kolaylık geldi. Bootsrap 4 hakkında bilmeniz gerekenler bu yazıda.

Tasarımcıların Bootstrap 4 Hakkında Bilmesi Gerekenler

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.

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:

  1. ÜCRETSİZ: Bootstrap açık kaynaktır. Kredi kartınıza müracaat etmenizi gerektirmez.
  2. 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.
  3. Ö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.
  4. 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.
  5. 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.

Bootstrap 4Grid Sistemi

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.

tarihinde Web Tasarım Dersleri kategorisinde yazdı46 yorum

Sosyal Medyada Paylaşmak İster Misiniz?
Bizi Takip Etmek İster Misiniz?

Her gün sosyal medya, web tasarım, dijital dünya ve SEO konularında yazılar paylaşıyoruz. Siz de bu yazılardan haberdar olmak isterseniz, bizleri sosyal medya hesaplarımızdan takip edebilir ya da e-posta adresinizi girerek günlük haberleri alabilirsiniz.

Fikirlerinizle Bu Yazıya Katkı Sağlayabilirsiniz

Yazımız hakkında aklınıza bir şeyler mi geldi? Yoksa, eklenebilecek kısımlar olduğunu mu düşünüyorsunuz?

Lütfen, yorumlarınız sayesinde bu yazıyı geliştirmekten çekinmeyiniz. Alt kısımda yer alan yorum ekleme alanını değerli fikirlerinizi eklemek için kullanabilirsiniz.

Creative Media

Creative Media

CREAMIVE, Creative ve Media kelimelerinin birleşimiyle 2010 yılında dünyaya gelmiş ve sözlüklere (en azından şimdilik arama motorları sözlüklerine) hızlı bir şekilde yerleşmiştir.

Bu hesap altında paylaşılan yazılar ise genellikle ekip arkadaşlarımızdan birkaç kişinin ortak olarak yazdığı ya da düzenlediği yazılar olacaktır.

İlgili Yazılar
SaaS Nedir?SaaS Nedir?
HTML Nedir?HTML Nedir?
Kullanıcı Dostu Mobil Uygulama Deneyimi Nasıl Tasarlanır?Kullanıcı Dostu Mobil Uygulama Deneyimi Nasıl Tasarlanır?
Profesyonel Web Tasarım Nedir?Profesyonel Web Tasarım Nedir?
Kendini Tanıtma Yazıları ÖrnekleriKendini Tanıtma Yazıları Örnekleri
Web Tasarım Firması Nasıl Seçilir?Web Tasarım Firması Nasıl Seçilir?
Güncel Yorumlar
Yorum Yapalım
Arama Kutusu
Kategoriler
E-Posta Aboneliği

Yazılarımızı takip etmek ister misiniz?

creamive kreatif fikirler web tasarım ajansı