Yusuf UYANIK – BLOG

Bootstrap İle Web Site Tasarımı Hakkında Her Şey

Yusuf UYANIK

Bootstrap 2011 yılından bu yana sürekli geliştirilmektedir ve sürekli olarak yeni özellikler eklenerek daha stabil bir yapı haline getirilmektedir. Bu geliştirmeler ise Twitter ekibi tarafından yapılmaktadır.

Son zamanlarda web site tasarımına başladıysanız veya hazır CMS (İçerik Yönetim Sistemi) kullanarak çeşitli tema arayışları içerisine girdiyseniz, başlığında Bootstrap yazan birçok tema veya web tasarım eğitimi görmüş olmalısınız.

Bootstrap 18 Ağustos 2011’ de ilk sürümünü yayınlamıştır, ancak yaklaşık son bir-iki yıldır popülerliğinin zirvesindedir, ülkemizde de son zamanlarda kullanım oranı ve bilinirliliği oldukça artmıştır.

Peki Nedir Bu Bootstrap?

Sorunun cevabına geçmeden önce sizlere çok kısa bir şekilde Framework tanımı yapmak istiyorum; bu aynı zamanda sorumuzun cevabında da açıklayıcı bir unsur olacaktır. Framework olarak ifade edilen şey aslına bakarsanız bir kütüphanedir. Birçok yazılım dili için önceden hazırlanmış kütüphaneler bulunmaktadır, bu kütüphaneler geliştiricilere kolaylık sağlaması sebebi ile tercih edilmektedir. Geliştirici kütüphaneye ulaşarak, ihtiyacı olan yapıları, sınıfları sıfırdan kendisi yaparak zaman kaybetmek yerine, hızlı bir şekilde temin eder. Bunun için yapılması gereken tek şey front-end yazılım için kütüphanenin sayfaya çağrılmasıdır.

Bootstrap ise HTML, CSS, JavaScript ile harmanlanmış ve responsive bir hale getirilmiş Framework’ tür. Bu Framework Twitter tarafından geliştirilmiş; MIT lisansına sahip ve açık kaynak kodludur. Bootstrap içerisinde yer alan stiller, JS’ ler ve fontlar sizin kullanmanız için arka planda hazır bir şekilde beklemektedir. Biraz kullanımına değinecek olursam, aslında siz sadece neyin nerede olacağını hayal edersiniz, sonrasında sayfanızda gözükmesini istediğiniz elementin hazır olan kodlarını kopyalayarak sayfada nerede gözükmesini istiyorsanız oraya yapıştırırsınız. Böylelikle herhangi bir kod bilginiz olmadan, örneğin HTML ve CSS ile hazırlanmış butonu kolay bir şekilde sayfanıza eklemiş olursunuz. Fakat temel olarak HTML ve CSS bilginiz olması halinde kopyaladığınız kodlara ait bir fikriniz olacağı için bu Framework’ ü çok daha sağlıklı ve temiz bir şekilde kullanıyor olacaksınızdır, çünkü zaman zaman işler içinden çıkılmaz bir hale gelebilir.

Bootstrap Framework, Twitter tarafından geliştirilmiştir bu sebeple başarılı büyük bir ekibi vardır. 2011 yılından itibaren sürekli olarak güncellenmiş; yeni özellikler katılmış ve daha stabil hale getirilmiş modern bir yapıya sahiptir. Yüz binlerce kullanıcısı olması sebebi ile geribildirim miktarı oldukça fazladır, yapılan geribildirimler Bootstrap geliştiricileri tarafından takip edilerek hatalar onarılmış ve sistem hep daha iyiye getirilmiştir. Web tasarımcıların en şikayetçi olduğu konu “tarayıcı uyumsuzluğu” dur. Bootstrap burada da yardıma koşmakta ve
tüm popüler tarayıcılar ile uyumlu bir halde olmaktadır, sizin ekstrem bir isteğiniz olmadığı sürece tarayıcı uyumluluğu için yapmanız gereken ekstra bir işlem olmayacaktır.Back-end yazılımcılar sistemin alt yapısı ile boğuştukları için genellikle işin tasarım kısmıyla uğraşmak istemezler, Bootstrap bu sebeple hızlı, kolay kullanılabilirliği ve etkin tasarımı ile backend yazılımcıların da gönüllerini fethetmiştir.

Bootstrap Responsive!

Artık mobil cihazların kullanımının hızlı bir şekilde artması ile duyarlı web siteleri yapmak, ziyaretçilerinizi kaybetmemeniz adına neredeyse zorunlu bir hale gelmiştir. Responsive olarak yapılan web siteleri tablet, telefon, masaüstü bilgisayar v.b gibi farklı çözünürlüklü cihazlar üzerinde derli toplu anlaşılır ve okunaklı olarak gözükür. Responsive tasarımlar çözünürlük kontrolüne bağlı olarak birçok ekstra özelliği de beraberinde getirmektedir. Örneğin sadece mobil cihazlarda gözüken bir açılır menü oluşturabilirken mobil cihazlar üzerinde gözükmeyen ancak masaüstü cihazlarda gözüken büyük bir reklam alanı da oluşturabilirsiniz. Hangi cihazda hangi görüntünün oluşacağına karar vermek tamamen sizin kontrolünüzdedir.Bootstrap dünya üzerinde sık kullanılan ve kabul görmüş cihaz çözünürlüklerini CSS kütüphanesi içerisinde barındırır, sizin yapmanız gereken ise uygun Grid sistemine göre web sitenizi tasarlamaktır. Kısaca Bootstrap Grid sisteminden bahsetmek gerekirse, 12 adet kolon bulunmaktadır; bu kolonların hepsi eşit yüzdesel genişliktedir.

Örneğin 8’ e 4 bir Grid sistemi kullanmanız halinde sayfanız bu orana göre 2 parçaya ayrılmış bir hale gelecek; sol bölüm daha genişken sağ bölüm daha dar olarak gözükecektir.

Her Fikre Uygun

Bir web sitesi kullanıcı ara yüzü oluşturmak için gerekli olan birçok öğe Bootstrap içerisinde bulunmaktadır. Standart yazı tagları, listeleme özellikleri, tablolar, formlar, seçim kutuları, butonlar, görsel tasarımları, çeşitli ikonlar, yükleme barları, bildirim çubukları, gömülmüş video alanları, model pencereler, açıklama satırları, açılır ve tab menüler gibi içerisinde birçok CSS, Components ve JavaScript bulunmaktadır. Hangisine ihtiyacınız var ise onu seçer ve kodlarını kopyalarsınız.

Kullanım Tüyoları

Her sistemin olduğu gibi Bootstrap’ inde olumsuz tarafları mevcuttur ancak küçük düzenlemeler ile önüne geçilebilmektedir. Size ideal kullanım için birkaç kısa bilgi aktaracağım.
İçerisinde çok fazla Component ve JavaScript bulundurması sebebi ile CSS dosyası 6500, JS dosyası ise 2300 satır civarındadır, bu durum sitenizin tarayıcı üzerinde açılış hızını doğrudan etkilemektedir. Bootstrap dosyaları içerisinde minimize (küçültülmüş) edilmiş CSS ve JS dosyaları da bulunmaktadır bu dosyaları kullanmanızı öneririm.

Eğer sadece birkaç sayfalık küçük bir web sitesi yapmayı planlıyorsanız http://getbootstrap.com/ customize adresine girerek sayfanızda kullanmak istediğiniz “Common CSS”, “Components”, “JavaScript Components” ve “jQuery Plugins” seçimlerini yaparak size özel bir Bootstrap oluşturabilirsiniz. Böylece CSS ve JS dosyalarından kullanmayacağınız özelliklere ait kodları çıkartmış ve satır sayısını (dosya boyutunu) azaltmış olacaksınız.

Bootstrap yaygın bir şekilde kullanılması sebebi ile çoğu zaman girdiğiniz birçok site birbirine benziyor olabilir. Siz bu benzer tasarıma sahip siteler arasından sıyrılmak istiyorsanız burada imdadınıza http://bootstrapcdn.com/#bootswatch_tab adresi koşuyor. Bootstrap’ ın bahsetmediğim bir diğer güzel özelliği ise içerisinde tema yapısı barındırmasıdır. Bu sayfa üzerinden farklı temaları görüntüleyerek size uygun olanını tercih edebilir veya kendinize ait bir Bootstrap teması oluşturabilirsiniz.

İndirme ve Kullanım

Bootstrap’ e ait tüm dosyaları, örnek tasarımları ve kullanım detaylarını http://getbootstrap.com/ adresi üzerinden edinebilirsiniz.
Sayfa ne yazık ki şu an aşağıdaki dillerde destek vermektedir.

Exit mobile version