Bootstrap nedir?

Bootstrap, HTML, CSS ve JavaScript kullanılarak yazılmış, açık kaynaklı ve ücretsiz bir web uygulaması geliştirme araç takımıdır. Eski Twitter çalışanları Mark Otto ve Jacob Thornton tarafından oluşturulan bu kütüphane, geliştiricilere duyarlı web siteleri oluşturabilme imkanı sağlar.

Bootstrap, web sitelerinin ve mobil uygulamaların kullanıcılara görünen bileşenleri için kullanılabilecek CSS ve JavaScript taslakları içerir. Bu taslaklar, geliştiricilerin web siteleri ve mobil uygulamaları oluşturmak için temel kodları hızlı bir şekilde oluşturmasına olanak tanır.

Bootstrap, web geliştirmede yaygın olarak kullanılan bir kütüphanedir. Bootstrap, web siteleri ve mobil uygulamaları hızlı ve kolay bir şekilde oluşturmak isteyen geliştiriciler için değerli bir araçtır.

Bootstrap'ın temel özellikleri

CSS: Bootstrap, web sitelerinin görünümünü ve stilini tanımlamak için kullanılan bir CSS çerçevesidir. Bootstrap, web sitelerine profesyonel bir görünüm ve his vermek için önceden tanımlanmış stiller ve bileşenler sunar.
JavaScript: Bootstrap, web sitelerine etkileşimli özellikler eklemek için kullanılan bir JavaScript çerçevesidir. Bootstrap, web sitelerine gezinti, açılır pencereler, animasyonlar ve diğer etkileşimli özellikler eklemek için kullanılan önceden tanımlanmış bileşenler sunar.
HTML: Bootstrap, web sitelerinin temel yapısını oluşturmak için kullanılan bir HTML çerçevesidir. Bootstrap, web sitelerine içerik eklemek ve web sitelerinin düzenini tanımlamak için kullanılan önceden tanımlanmış bileşenler sunar.
Bootstrap, web tasarımı ve geliştirme konusunda deneyimi olmayan kişiler için bile kullanımı kolay bir araçtır. Bootstrap'ın kullanımı, web siteleri oluşturma sürecini basitleştirir ve geliştiricilerin daha verimli çalışmasını sağlar.

Bootstrap hakkında daha detaylı incelememizin olduğu "Duyarlı Tasarımın Öncüsü Bootstrap Detaylı İnceleme" yazımızı da okuyabilirsiniz. Bu yazımızda Bootstrap'in avantajları, dezavantajları ve Bootstrap alternatiflerini inceledik.

Bootstrap'in kullanım alanları

Bootstrap, çeşitli kullanım alanlarına sahip çok yönlü bir CSS framework'üdür. İşte Bootstrap'in yaygın kullanım alanlarından bazıları:

Web Siteleri ve Uygulamalar: Bootstrap, web siteleri ve web uygulamaları oluşturmak için yaygın bir tercihtir. Mobil uyumlu ve duyarlı tasarımı sayesinde farklı cihazlarda kusursuz çalışır.
Kurumsal Web Siteleri: Bootstrap, şirketlerin ve işletmelerin kurumsal web siteleri için ideal bir çözümdür. Hızlı bir şekilde profesyonel bir görünüm elde etmelerine yardımcı olur.
Kişisel Portfolyolar: Bootstrap, sanatçılar, tasarımcılar ve geliştiriciler için kişisel portfolyo web siteleri oluşturmak için kullanılır. Görsel olarak çekici ve düzenli portfolyolar oluşturmak kolaydır.
Bloglar: Bootstrap, bloglar için temel stillemeleri ve düzenleri sağlar. Blog yazarları, içeriklerini güzel bir şekilde sunmak için Bootstrap'i tercih ederler.
E-ticaret Siteleri: Bootstrap, e-ticaret platformlarının ve çevrimiçi mağazaların ön yüzünü oluşturmak için kullanılır. Ürün listeleri, sepetler ve ödeme sayfaları gibi bileşenler hızlıca oluşturulabilir.
Yönetici Panelleri: Bootstrap, yönetici panelleri ve panele dayalı uygulamaların geliştirilmesinde yaygın olarak kullanılır. Kullanıcı arayüzü tasarımını hızlandırır ve kapsamlı verileri düzenlemek için kullanışlıdır.
Sosyal Medya Uygulamaları: Bootstrap, sosyal medya platformlarının veya uygulamalarının ön yüzünü geliştirmek için tercih edilir. Kullanıcı profilleri, haber beslemeleri ve etkileşimli bileşenler oluşturmak kolaydır.
Eğitim ve E-Öğrenme Siteleri: Bootstrap, öğretim materyallerini sunmak için kullanılan eğitim ve e-öğrenme web sitelerinin tasarımında yaygın olarak kullanılır. Eğitim içeriği ve öğrenci yönetimi için uygun bileşenler içerir.
Landing Sayfaları: Bootstrap, ürün veya hizmet tanıtımı yapmak için kullanılan landing (iniş) sayfalarının oluşturulmasında etkilidir. Dönüşüm oranlarını artırmak için kullanılır.
Mobil Uygulamalar: Bootstrap, web tabanlı mobil uygulamaların tasarımı ve geliştirilmesinde kullanılır. Duyarlı tasarım özellikleri mobil cihazlarda sorunsuz çalışmayı sağlar.

Bootstrap'in bu çok yönlü kullanım alanları, web geliştiricilerinin hızlıca projeler oluşturmalarına ve tasarımlarını iyileştirmelerine olanak tanır.

Bootstrap nasıl kullanılır?

Bootstrap hazır bir sistem olduğu için her şeyi kopyalayıp yapıştırarak halledebilirsiniz. Fakat, öncelikle dosyanız için mutlaka yapmanız gereken şeyler var. Örneğin; sayfanız Html5 olmalı ve Bootstrap için CSS dosyası ile jquery scriptini sayfaya mutlaka eklemelisiniz. Sayfanızda kullanacağınız tüm ögeler için referansınız getbootstrap.com adresi olacak. Siteye giriş yaptığınız üst menüde yer alan Getting Started, CSS, Component ve JavaScript alanlarında sizin için gerekli olan kodları kopyalayıp yapıştıracaksınız.

Bootstrap'in temel tasarım mantığı, bir satırın 12 sütuna bölünmesi ve bu sütunların farklı genişlikteki cihazlara göre daraltılıp esnetilebilmesinden oluşuyor. Böylece bu sütunların farklı cihazlarda görüntülenme şekilleri de değiştirilebiliyor. Örnek verecek olursak, geniş ekranlı bir cihaz için üçlü sütun yapısı düşünüyorsunuz. Bootstrap'in sunduğu 12'ye ayrılan satırı dörderli sütunlar halinde böldüğünüz takdirde üçlü sütun yapısını oluşturabilirsiniz.

Farklı cihazlarda sütunların farklı şekilde davranmasını istediğiniz takdirde kullanılacak cihaza göre sütunların davranması gerektiği şekilde aynı class etiketi içerisine bu genişlikleri birlikte yazabilirsiniz. Örneğin; masaüstü bilgisayarlar için .col-md-3 class’ı ile dörde böldüğünüz satırların tabletlerde iki adet ikili sütun şeklinde görünmesini isteyebilirsiniz. Yani masaüstü bilgisayarda dörtlü sütun olarak görünen satır, tabletlerde iki satıra dönüştürülüp her bir satırda ikili sütun görünecek şekilde davranmasını sağlayabilirsiniz.

bootstrap-3.0.1-dist.zip dosyası, sayfanız için mutlak suretle gerekli olan dosyaları barındırıyor. bootstrap-3.0.1.zip dosyasında ise Bootstrap'in bütün dosyalarını bulabilirsiniz. Eğer ana şablonu oluşturmakla uğraşmak istemiyorsanız, indireceğiniz dosyaların içerisinde örnek sayfalar bulunuyor. Bu örnek sayfaları kendi şablonunuz olarak kullanabilirsiniz. Tasarımları yaparken de bu örnek sayfalara sıklıkla başvuracaksınız.

Bootstrap kurulumu

Tasarlayacağımız örnek sitenin en üstünde header alanında ana menü, altında carousel, onun altında üçlü sütundan bir alan, onun da altında footer yer alsın. İlk olarak bootstrap-3.0.1-dist.zip ve bootstrap-3.0.1.zip dosyalarını zipten çıkarıp, Examples klasöründe bulunan Navbar’daki örneği şablon şeklinde kullanmak için index.html dosyasını kopyalayıp bootstrap-3.0.1-dist klasörünün içine yapıştıralım. Ancak ilk açıldığında tasarım düzgün olarak görünmeyecektir. Bunun nedeni, CSS dosyasının linkinin doğru yerde olmaması. Kopyaladığımız index.html içindeki CSS ile Bootstrap js dosyalarının, iki üst klasörde olduğunu tanımlayan kısmı silerek kaydediyoruz. Artık dosya açıldığında şablon görünüyor. Header alanı da hazır. .jumbotron divi ise gerekli olmadığı için siliyoruz. Devam eden işlemde getbootstrap.com adresine giderek JavaScript bölümünden carousel kısmı için gerekli scripti kopyalıyoruz ve sayfamızda görünmesini istediğimiz yere yapıştırıyoruz.

Carousel'de bulunan her bir slide kod, aşağıda yer alan kısmın içerisine yerleştirilmeli. Bunun anlamı ise her bir slide için aşağıda bulunan kodu çoğaltmamız gerektiği. Temel düzeyde html bilgisine sahipseniz, bu düzenlemeleri kolaylıkla yapabilirsiniz. Aktif slide için gerekli olan .active classı yalnızca ilk slide divinde bulunmalıdır, diğerlerinden silmeniz gerekir. Buna ek olarak, imajlar için dosya yolunu ve slide içerisinde kullanılacak metni kod üzerinde düzenlemelisiniz.

Sırada üçlü sütun ekleme işlemi var. Bunun için Bootstrap'in resmi sitesine gidiyoruz ve Components > Thumbnail > Custom Content kodunu kopyalayıp yapıştırıyoruz. Üçlü sütun yapmak istediğimiz için row div'ini içerisinde yer alan div'i çoğaltıyoruz. Böylelikle üçlü sütunu da sitemize eklemiş olduk.

Sitenin tamamlanması için yapmamız gereken tek şey footer alanını eklemek. Bunun için, daha önceden indirdiğimiz Examples klasörünün içerisinde bulunan Sticky Footer klasöründeki kodu kopyalıyoruz ve sayfamızda görünmesini istediğimiz yere yapıştırıyoruz. Artık sayfamız hazır.

Siz de çok kısa bir sürede, Bootstrap sayesinde sitenizi tasarlayabilirsiniz. Yalnız Bootstrap'te dikkat etmeniz gereken çok önemli bir konu var. İmajların en - boy ölçüleri asla yazılmıyor. Bootstrap, imaj ölçülerine responsive olacak şekilde kendisi yönetiyor ve hazırladığınız siteye göre kendisi büyütüp küçültüyor.