Bootstrap Nedir?

Bootstrap bir tasarım aracıdır. Bu tasarım aracının temel özelliği açık kaynak kodlu olmasıdır. Bildiğiniz gibi kodlamalar bazen kullanıcılara verilmez ve açık değildir. Açık olmadığı durumlarda kullanıcı da kodlama üzerinde istediği değişikliği yapamaz. Ama Bootstrap'ın temel özelliği bir tasarımcıya kodlar üzerinde oynama hakkı vermesidir. Bootsrap’a dilerseniz bilgisayarınız ya da tabletinizle veya telefonunuzla girebilirsiniz. Kullandığınız cihazın büyüklüğüne bağlı olarak sitenizin dilediğiniz şekilde görünmesini sağlayabilirsiniz. Bootstrap sitenizde istediğiniz tema ve tasarım değişikliklerini yapmanıza izin verir. 

Bootstrap Avantajları

Bootstrap size bir site için gereken hemen hemen bütün hazır tasarım unsurlarını sunar. Hazır olan bu çok sayıda tasarımdan faydalanarak dilediğiniz gibi bir site hazırlayabilirsiniz. Tamamen hazır olan kodlamalar üzerinde değişiklik yaparak dilediğiniz şekilde bir site hazırlayabilirsiniz. Bütün Javascriptler, stil ve imajlar bootstrap içine yerleştirilmiştir. Dilediğiniz bir tanesini çağırıp üzerinde çalışabilirsiniz. Bootstrap’ın en son çıkan sürümü hemen hemen bütün internet tarayıcılarının son sürümlerinde uyumlu bir şekilde çalışabiliyor. 

Bootstrap Nerelerde Kullanılır?

Bir internet sitesi hazırlamak istediğinizde bu siteyi bir bütün halinde Bootstrap’la hazırlayabilirsiniz. Bir site kurmak için size gerekli olan her şey Boostrap’ta hazır olarak bulunuyor. Dropdown menü, tipoğrafik öğeler, modal pencereler, etiket, sayfalandırma, buton, thumbnaili uyarı gibi size gereken her şey Bootstrap’ta size hazır bir şekilde veriliyor. Yapmanız gereken tek şey dilediğiniz herhangi bir kodu seçtikten sonra kopyalamak ve ardından yapıştırmaktır. 

Bootstrap’i Kullanmak Zor mu?

Yukarıda da söylediğimiz gibi hemen hemen bütün tasarım unsurlarını size tamamen hazır şekilde sunan Bootstrap’ı kullanmak için yapmanız gereken tek şey kopyalama ve yapıştırma işlemi. Ama bu işlemlere başlamadan önce dosyanız için yapılması gereken şeyler de vardır. Mesela sizin sayfanızın html5 olması gerekiyor. Bootstrap uygulamalarını kullanabilmek için bir CSS dosyası ile birlikte jquery scripti de sizin dosyanıza eklenmiş olmalıdır. Sitenizi ya da sayfanızı hazırlamak için kullanacağınız referans ise, getbootstrap.com olacaktır. Size yardımcı olacak olan bütün kodlar, CSS, JavaScript, Getting Started ve Component gibi alanlarda bulunuyor. 

Bootstrap Tasarım Planı

Bootstrap’ta her satır 12 ayrı sütuna bölünmüştür. Buradaki sütunlar farklı araçlara göre genişletilip daraltılabilir. Yani bu sütunlar başka cihazlar için farlı bir şekilde görüntülenebiliyor. Eğer cihazınız çok geniş bir ekrana sahipse, üçlü sütun kullanırsınız. 12 sütunun her birini dörderli olarak kullandığınızda bir üçlü sütun yapısı oluşturursunuz. Bu sütunları ayrı mobil cihazlar için kullanacaksanız kullandığınız cihaza uygun olarak, sütunların genişlikleri aynı etiket içerisine yazabilirsiniz. Bu şekilde masa üstü bilgisayar, mobil cihaz ve de tabletler için farklı sütunlarla çalışmanız mümkün olur. 

Bootstrap-3.0.1.zip Dosyası

Bootstrap-3.0.1.zip dosyasının içinde sizin sayfa hazırlamak için kullanacağınız bütün dosyalar bulunuyor. Diyelim ki sayfanızın ana şablonunu hazırlamanız gerekiyor ve bunu da hızlı bir şekilde yapmak istiyorsunuz. İndireceğiniz bu dosya içerisinde pek çok hazır dosya bulunuyor. İçerisinde bir tanesini seçip kullanabilirsiniz. Örnek sayfalar arasından istediğiniz gibi bir sayfa seçip onu kullanabilirsiniz. Ayrıca tasarım yaparken de hazır sayfalardan yararlanabilirsiniz. 

Bootstrap Nasıl Kullanılır?

Bir web sitesi hazırlamaya başladınız ve başlık yani header alanında ana menü bulunuyor. Onun altında ise carousel, daha altta üçlü sütun içerisinden bir alan ve onun da altında footer bölümü bulunsun. Önce zip içerisinden bootstrap-3.0.1 ve de bootstrap-3.0.1-dist.zip dosyalarının ikisini de çıkarmalısınız. Diyelim ki Examples klasörü içerisinde yer alan Navbar örneği sizin seçtiğiniz şablonunuz olsun. Bu şablonu kullanabilmek için önce index.html dosyasını koyalamanız gerekiyor. Daha sonra kopyaladığınız bu dosyayı bootstrap-3.0.1-dist.zip doyasına yapıştırın. Açar açmaz sizin şablonunuz düzgün görünmeyebilir. Bu görüntünün sebebi CSS dosyası linkinin yeri ile ilgilidir. Bu link olması gereken yerde değil. Bunu düzeltmek ve devam etmek için, daha önce kopyalanan index.html doyası içersindeki Bootstrap s ve CSS dosyalarının daha üst bir klasörde olduğunu gösteren kısmı silmeniz gerekiyor. Şimdi tekrar dosyayı açtığınızda şablonu düzgün görebilirsiniz. Artık header bölümünüz de hazırdır. .jumbotron divi kısmı şu andan itibaren gereksiz olduğu için silinebilir. Daha sonra ise getbootstrap.com adresine girmeniz gerekiyor. Bu adresteki Javascript kısmından Carousel için gerekli olan istediğiniz script’i kopyalayıp sayfanızda istediğiniz bir bölüme yerleştirebilirsiniz.

Carousel İşlemleri

Carousel içerisinde slide kodlar yer alıyor. Buradaki kodlar, daha aşağıdaki bölüme yerleştirilir. Burada kullanılan slidelerin her birisi için, aşağıda yer alan kodun çoğaltılması gerekiyor. Az bir seviyede bile html bilginiz varsa bu çoğaltma ve düzenleme işlemleri size çok zor gelmez. .active class’ı ise yalnızca ilk slide’da bulunur, diğerlerinde yer alması gerekmez. Bu yüzden diğer slidelerdan bu class’ı silebilirsiniz. Bununla birlikte, slide’ın içinde yer almasını istediğiniz metni ve imajlara gerekli olan dosya yolunu düzenlemeniz gerekiyor. 

Üçlü Sütun İşlemi

Bütün bu düzenlemeleri tamamladıktan sonra, üçlü sütun eklemeniz gerekiyor. Üçlü sütun ekleyebilmek için, Bootstrap’ın resmi olan sitesine gitmeniz gerekiyor. Resmi siteden kopyalamanız gereken kod ise: Component>Thumbnail>Custom>Content. Row div içinde bulunan div’in çoğaltılması gerekiyor. Bu üçlü sütun ekleyebilmek için yapılması gereken bir işlemdir. Bu işlemin ardından üçlü sütun ekleme tamamlanmış oluyor. 

Footer Alanı

Sitenizin ya da sayfanızın hazırlanması için gerekli olan tek şey footer eklenmesi işlemidir. Footer eklemeniz için de bir kod kullanmanız gerekiyor. Zaten indirmiş olduğunuz Examples dosyası içerisinde yer alan, Sticky Footer klasörü sizin için gereken klasördür. Bu klasördeki kodu kopyalayarak, sayfanızda footer’ın yer almasını istediğiniz yere yapıştırmanız gerekiyor. Bu yapıştırma işlemi ile birlikte footer alanınız da sayfanıza eklenmiş oluyor. Böylece sayfanız da tamamlanmış hale geliyor. 

Bootstrap Kullanımı

Bootstrap kullanarak, az seviyede bir html ve kodlama bilgisi ile çok kısa bir süre içinde kendi sayfanızı ya da sitenizi hazırlayabilirsiniz. Bootstrap’ta hazır olan imajlarda herhangi bir boy ve en ölçüsü bulunmuyor. Bootstrap bu ölçüleri kendisi otomatik olarak yönetiyor. Sizin hazırladığınız sitenin ve kullandığınız cihazın ölçülerine uygun bir şekilde Bootstrap bütün en ve boy ölçülerini kendisi hazırlıyor. Bootstrap kullanırken size düşen tek şey gerekli olan tasarım araçlarını çağırmak. Bootstrap site hazırlamak için gereken araçlarını hazır olarak monte edilmiş biçimde içeriyor. Var olan kodlarla sizin en baştan yepyeni bir site tasarlamanız mümkündür.  Bunları çağırıp, kopyaladıktan sonra, yerleştirmek istediğiniz yere tıklayarak kulanabilir ve sayfanızı ya da sitenizi tamamlayabilirsiniz. 

Bootstrap Neleri Kolaylaştırır?

Responsive web design konusunda bootstrap size hazır şablonlar sağlar. Yani duyarlı tasarım yapma konusunda size kolaylık sağlar. Bu kolaylığın en önemli nedeni açık kodlu bir kaynak olmasıdır. Bu açık kodlar sayesinde less de kullanarak bütün şablonları baist bir şekilde özelleştirebilirsiniz. Yani dilediğiniz bir şekilde kodları kullanarak yeni tasarımlar yapabilirsiniz. Web sitesi tasarımı oldukça karmaşık görünür. Üstelik ileri seviyede bir kodlama bilgisini gerektiriyormuş gibi görünür. Ama Boostrap sayesinde bu artık o kadar zor değildir. Sunduğu çeşitli ara yüzler sayesinde site tasarımcıları için büyük bir kolaylık sağlıyor. Özellikle de CSS konusunda az bilgisi olan ve bu konularda çalışmaya yeni başlamışlar için Bootstrap çok önemli avantajlar sağlıyor. 

Bootstrap Neden Yaygındır?

Bootstrap bugün site tasarımı konusunda en çok kullanılan programdır. Bunun nedeni ise oldukça kolay bir şekilde kullanılıyor olmasıdır. Dokümantasyonunun anlaşılması çok rahattır. Aslında yeni hazırlanmış olan hemen her site, temel bir bootstrap uygulaması olarak kabul edilebilir. Bu durum belki tasarımcılar için web tasarımı konusunu basitleştirip seviyesini düşürdüğü söylenebilir. Ama bir yandan da şu durum geçerlidir ki Bootstrap’ta hazır olarak monte edilmiş olan bütün tasarım araçları aslında özelleştirilebilir. Özelleştirme konusu tasarımcının yaratıcılığına kalmıştır. Tasarımcı bu konuda emek vererek yepyeni ve daha önce yapılmamış tasarımlar yapabilir. Böyle bir uygulama tasarım yapmak isteyen ama bu alanda ileri seviyede bilgisi olmayan herkesi tasarıma teşvik edebilir. Üstelik dileyen herkes bu program sayesinde kendi web sitesini tasarlayabilir. Bugün web sitesi hemen herkes ve de her firma için gerekli olan bir araçtır. Herhangi bir konuda bir sayfa hazırlamak isteyen çok sayıda kişi vardır. Herhangi bir profesyonel firmanın da web sitesi olmaması gibi bir durum düşünülemez. Daha profesyonel bir web sitesi hazırlamak için uzmanlara başvurabilirsiniz ama kendi sitenizi hazırlamak isterseniz Bootstrap gerekli olan hemen her şeyi içerisinde barındırabilir. Oldukça geniş seçenekleri olan ve web sitesi için gerekli olan her şeyi içeren bir sürümdür.