Bootstrap Nedir? Nasıl Kullanılır?

Bootstrap, ücretsiz bir CSS framework’udur. Halka açık kaynak kodlu tasarım araçlarından biri olduğu için masaüstü bilgisayarlarınız, cep telefonunuz ya da tabletiniz için kullanılan cihaz boyutuyla orantılı olarak istediğiniz temaya uygun tasarımlar yapabilirsiniz. Web site tasarımı yapabilmek için gerekli olan tüm özellikleri taşıyan Bootstrap ile, içerisinde yer alan hazır unsurlarla hayalinizdeki tasarımı istediğiniz cihaza göre tasarlayabilir ve rahatlıkla kullanabilirsiniz.

Tasarım süreçlerinin uzun ve karmaşık yapısı olduğunu düşünerek kendi tasarım projelerinizi hayata geçirme konusunda endişe duyuyorsanız, Bootstrap içerisindeki hazır kodlar sayesinde pratik bir şekilde ve aklınızdaki tasarımı yapmanız mümkündür. Tasarımla ilgili tüm unsurlar, Javascript ve tasarım stilleri Bootstrap içerisinde hazır halde bulunduğu için Siz sadece istediğiniz tasarıma karar vererek kolayca tasarım yapabilir ve tasarımınızın boyutunu ayarlayabilirsiniz. Bootstrap, açık kaynak kodlu olmasının yanı sıra güncellenen bir tasarım aracı olduğu için yenilikleri ve son moda trendleri kaçırmadan tasarım yapmaya başlayabilirsiniz. Üstelik en çok kullanılan Chrome başta olmak üzere Opera, Mozilla Firefox ya da Safari gibi neredeyse tüm internet tarayıcılarında çalıştığı için kullanım kolaylığı oldukça yüksektir.

Bootstrap Nasıl Kullanılır?

Bootstrap içerisinde hazır kodlar bulunduğu için kopyala yapıştır şeklinde tasarımlar yapabilirsiniz. Ancak tasarım yapabilmek için yerine getirmeniz gereken bazı işlemler var. Güncel bir tasarım aracı olduğu için sayfanız mutlaka HTML5 olmalıdır. HTML5 sayfanızı kullanıma hazır hale getirebilmek için jquery cript ve CSS dosyasını internet sayfanıza mutlaka eklemeniz gerekir. Bu işlemleri yaparak sayfanızdaki tüm tasarımların referans adresini getbootstrap.com olarak belirlersiniz. Siteye girdikten sonra ana sayfanın üst kısmında bulunan menüdeki Getting Started butonuna tıklayarak Bootstrap ile tasarım yapmaya başlayabilirsiniz. Javascript, CSS ve Componet alanlarında sizi bekleyen kodları kopyaladıktan sonra yapıştırarak işlemlerinizi halledebilirsiniz.

Diğer tasarım programlarından farklı olan Bootstrap, 1 satını 12 sütuna bölerek, her sütunun farklı cihazlara göre şekillendirilmesini sağlıyor. Mesela geniş ekranlı bir cihaz için, tablet gibi, üç sütundan oluşan bir tasarım oluşturmayı düşünüyorsunuz. Bootstrap kullanarak 12 ayrı satırı dörderli sütun halinde bölerek üçlü sütun yapısı oluşturabilirsiniz.

Örnek Kullanım Şekilleri

Eğer farklı cihazlar için yaptığınız ayarların manuel olarak değil otomatik olarak değişmesini istiyorsanız, her cihaz için sütunların olması gereken genişliklerini class etiketi içerisine yazabilirsiniz. Örnek vermek gerekirse, masaüstü bilgisayarlar için bir web sayfası tasarlamak istiyorsunuz. Bu web sayfanızın hem masaüstü bilgisayarlar hem de cep telefonlarında cihaz boyutuna uygun olarak davranabilmesini sağlayabilirsiniz. Bunun için .col-md-3 class kullanarak satırları dörde böldüğünüz zaman, bu satırların cep telefonlarında iki tane ikili sütun şeklinde görünmesini istediğinizde class etiketi aracılığıyla tüm cihazlarla uyumlu web sayfaları tasarlayabilirsiniz.

Web sayfanızı tasarlamanıza yarayacak olan bootstrap-3.0.1-dist.zip dosyası, web sayfanızda yapacağınız değişikleri sağlayabilmeniz için gerekli dosyalardan oluşuyor. Eğer dosyaların tamamını incelemek istiyorsanız bootstrap-3.0.1-dist.zip dosyasına göz atabilirsiniz.

Web sayfanızı oluştururken hazır şablonlar ya da hazır web sayfa yapıları bulunuyor. Bootstrap kullanarak web sayfanızın ana şablonunu kendiniz oluşturabilir ya da sayfa içerisinde bulunan örnek dosyaları kullanabilirsiniz. Bootstrap’ın bünyesinde barındırdığı örnek sayfaları, hem şablon oluştururken hem de tasarım yaparken istediğiniz kadar kullanabilirsiniz.

Bootstrap Nerede Kullanılır?

İnternet sitesi tasarlamak gibi bir düşünceniz varsa istediğiniz internet sitesini kolay bir şekilde hazırlayabilirsiniz. Bir web sitesi için gerekli olan tüm tasarımları oluşturabileceğiniz Bootstrap içerisinde hazır sayfalar ve örnek şablonlar işinizi oldukça kolaylaştırır. Carousel, slider, tablo, tipografik unsurlar, menü, buton, modal pencere, navigasyon bar, dropdown menü, thumbnail, etiket ve yükleme barı, bilgilendirme balonu ya da imaj tasarımları gibi bir internet sitesi için gerekli olan tüm materyaller hazır kodlar eşliğinde kullanıcılarla buluşturulmuştur. Bootstrap kullanımını bu denli kolay yapan tek şey, hazır kodların kopyala yapıştır işlemleriyle esnek bir kullanıma sahip olmasıdır. İçerisindeki şablonlar ya da örnek sayfalar tek tık uzağınızdadır.

Bootstrap Sayfa Kurulum İşlemleri

Web sitenizi tasarlamaya karar verdiğinizde, tasarım ilkelerine uygun bir sayfa tasarımı oluşturmanız gerekir. Web sitenizin üst kısmındaki header alanı menü, üst kısmın altında Carousel, onun da altında üçlü sütundan oluşan bir alan olduğunu varsayalım. En alt kısımda da footer alanı oluşturarak internet sitenizi tasarıma uygun hale getirmiş olursunuz.

Örnek bir işlem için;

  1. Bootstrap sayfa kurulum işleminiz gerçekleştirmek adına bootstrap-3.0.1-dist.zip ve bootstrap-3.0.1.zip dosyalarını zip formatından çıkarın.
  2. Ardından Examples klasöründe yer alan Navbar klasöründeki örneği şablon olarak kullanabilmek için index.html dosyasını kopyalayıp bootstrap-3.0.1-dist klasörüne yapıştırın.
  3. İşlemleri tamamladıktan sonra tasarımın kötü görüntüsü sizi tedirgin edebilir ama bir işlem daha taparak şablonunuzu daha düzgün bir hale getirebilirsiniz.
  4. Bunun için önceki işlemde kopyalamış olduğunuz index.html içerisindeki Bootstrap js ve CSS dosyalarının 2 üst klasörde olduğunu gösteren kısmı silerek kaydedin.
  5. Yaptığınız işlemin ardından dosyayı açtığınızda şablonun daha iyi göründüğünü ve header alanının hazır olduğunu göreceksiniz. Gerekli olmadığı için jumbotron divi dosyasını silebilirsiniz.
  6. İşlemler bittikten sonra getbootstrap.com adresine gidip sitedeki Javascript sekmesine ulaşarak Carousel kısmı için kullanmanız gereken scripti kopyalayıp web sayfanızda istediğiniz yere yapıştırabilirsiniz.

Kolayca Web Site Tasarımı Yapabilirsiniz

Sitenizi oluşturan header, üçlü sütun ya da footer alanları için benzer adımları uygulayarak istediğiniz web site tasarımınızı başarıyla ve oldukça pratik bir şekilde oluşturabilirsiniz. Bu sayede istediğiniz siteyi oluşturabilir ve zamandan tasarruf edebilirsiniz. Unutmamanız gereken bir nokta var. Web siteniz için imaj oluştururken en ve boy ölçülerini manuel olarak değiştirmeniz mümkün değil. Çünkü tasarımınızda imaj ölçüleri kendiliğinden ayarlandığı için kendi sitenizi oluşturduğunuz zaman responsive şekilde büyütme ve küçültme işlemleri yönetiliyor.

Bir önceki yazımıza https://smartpro.com.tr/jquery-nedir-nasil-ogrenilir/ linkinden ulaşabilirsiniz.

Net framework