Bootstrap Nedir?

Bootstrap Nedir?

 

Bir internet sitesi tasarlarken bilindiği üzere site üç ayak üzerinde tasarlanır. Bunlardan birincisi sitedeki elementlerin tanımlandığı HTML, ikincisi elementlerin önyüzdeki tasarımlarının tanımlandığı CSS ve üçüncüsü de sitenin davranışlarının (elementlerin davranışlarının) tanımlandığı Javascript ayağıdır. Verimli kullanılması istenen bir internet sitesi bu üç ayağa güçlü şekilde oturtulması gerekmektedir.

 

Tasarlanan her internet sitesinde, daha öncekilerle benzerlikler ve farklılıklar olacaktır. Elementleri, önyüzdeki tasarımları veya davranışları aynı/benzer olan bir çok internet sitesi mevcuttur. Örneğin tasarlanan bir  butonun yaptığı iş bir çok internet sitesinde aynı görevi görebilmektedir ya da benzer temaya sahip birçok internet sitesi bulunmaktadır. Bu yüzden kütüphaneler geliştirilmiş ve tasarımcıların kullanımına sunulmuştur. İnternet sitelerini her seferinde baştan başlayarak kodlamak yerine çeşitli kütüphanelerden ihtiyaca göre kod blokları alarak tasarlamak web tasarımcısı için büyük bir kolaylıktır. 

Sitenin önyüz tasarımının tanımlandığı CSS uygulamaları için de birçok kütüphane mevcuttur. Bootstrap bu CSS kütüphanelerinden biri ve en yaygın şekilde kullanılanıdır. Bootstrap’ i tanımlamak gerekirse, internet siteleri ve uygulamaları için kullanılan araçları barındıran bir önyüz çatısı, CSS kütüphanesidir. 

 

Bootstrap hem masaüstüne, hem mobile hem de tablete uygun siteler ve uygulamalar tasarlamaya imkan sunar. Tasarım anlamında neredeyse tüm ihtiyacı karşılaması Bootstrap’ i en çok kullanılan CSS kütüphanelerinden biri haline getirmiştir. Kolaylıkla tasarım kodlarının alınması ve sitede bulunan tüm elementlere rahatça uygulanabilir olması çok büyük bir rahatlık sağlamaktadır. Üstelik tasarlanan sitelerin tüm cihazlara uygunluğunun sağlanması da önemlidir. Günümüz internet dünyasında hiç bir internet sitesi tek bir cihaz kapsamı için tasarlanmamalıdır. Bu sebepten dolayı masaüstünde tasarlanan bir internet sitesinin mobil ve tablette de çalışıyor olması büyük önem arz etmektedir. Öte yandan Bootstrap açık kaynak kodlu bir kütüphanedir. Açık kaynak kodlu olması her isteğe cevap verebilmesi açısından Bootstrap’ i diğer CSS kütüphanelerinin önüne geçirmektedir. 

 

Bootstrap Kullanım Alanları

 

Bootstrap’ in bir internet sitesinin tasarımının tüm noktalarında kullanılabilir olduğundan bahsettik. Peki bu alanlar tam olarak nelerdir?

 

İnternet sitesi tasarlanırken kullanılan çokça farklı yapı vardır. Site bir ev, her sayfa da bir oda olarak düşünüldüğünde tüm evin ve her bir odanın tek tek tasarımı için özel dokunuşlar yapmak gerekir. Genişliği sizin elinizde olan bir odanın tasarımını nasıl yapardınız? Yüzlerce metrekareyi kaplayan bir alana oturtup bir çok kısmını boş mu bırakırdınız yoksa eve yerleştirmek istediğiniz tüm eşyaları bu odanın içine mi koyardınız? Ya da daracık bir oda tasarlayıp bir kaç eşya ile tüm odayı kapatır mıydınız? Normal şartlar düşünüldüğünde bu tarz fikirler pek uygun görünmüyor. Odanın amacına uygun ihtiyacı kadar eşya ve bir miktar yaşam alanı ile, içeriye konulacak eşya miktarıyla doğru orantılı olacak şekilde odanın alanını büyütmek en doğrusu olacaktır. Masa şurada dursun, sandalyeler hemen önünde; kitaplığı bu tarafta, şömine ve koltuklar da şu tarafta. Tabi ki eşyaları rastgele yerleştirmek doğru bir tercih olmayacaktır. Aynen bu örnekteki gibi internet sitesi tasarlarken kullanılacak olan öğeler tasarlanır ve site önyüzüne yerleştirilir. Elementlerin yerleştirilmesinde tasarımcılar özgür olsalar da örnekte de belirtildiği gibi gelişigüzel şekilde yerleştirmemekte fayda var. Kullanıcı tecrübesi (UX) açısından, elementleri bazı sınırlar ve tecrübeler göz önüne alınarak tasarlanan internet sitelerinin daha verimli olacağı öngörülebilir. 

Sitenin önyüzüne eklenen tasarımsal ve davranışsal ögeler kullanıcı tecrübesini oldukça etkilemektedir. Birbiriyle iç içe olan kullanıcı arayüzü (UI) ve kullanıcı tecrübesi (UX) kavramları site tasarımı noktasında çok önemli bir rol oynamaktadır. Siteye gelen ziyaretçiler için kullanılması kolay ve göze hoş gelen bir site tasarlamak her anlamda kar sağlacağından Bootstrap kullanımını da bu yönde uygulamak gerekmektedir. 

Hemen hemen her internet sitesinde bulunan carousel, slider, image, dropdown menü, buton, yükleme barı gibi öğelerin yanı sıra navigation bar, thumbnail uyarı, modal pencere gibi kullanıcı arayüzünde kullanılan bir çok öğe Bootstrap kütüphanesinde yer almaktadır. 

 

Bootstrap Kullanımına Dair

 

Bootstrap temel olarak sayfayı 12 sütuna bölerek kullanımı amaçlar. Bu 12 sütunun çeşitli cihazlara göre daralıp genişlemesi, tasarlanan sayfasının diğer cihazlara kolaylıkla entegre bir şekilde çalışabilmesini sağlamaktadır. 12 sütun olarak bölünen sayfada ögeler bu 12 sütun içine tasarımcının belirlediği genişliklerde yerleştirilir. Örneğin sayfada, bir satır için 2 sütunlu bir tasarım yapmak istiyorsanız  Bootstrap’ in sağladığı 12 bölümü 6’lı parçalara bölerseniz satırda 2 sütun elde etmiş olursunuz. 

 

Sayfalardaki sütunların hangi cihazda nasıl dizileceği de tasarımcı tarafından belirlenir. Masaüstünde 4 sütun halinde gösterilen öğeler tablette 2 sütuna indirilerek daha rahat bir kullanım sağlanabilir. 

 

Kullanmaya Başlamadan Önce

Bootstrap kütüphanesinin içindeki öğelerin sayfanın kodlarına eklenebilmesi için öncelikle yapılması gereken işlemler varıdır. Bootstrap kütüphanesine erişim imkanının sağlandığı getbootstrap.com internet sitesinde de bulunan bu bilgiler kısaca şu şekilde özetlenebilir;

 

• “bootstrap.min.css” dosyasının bulunduğu CSS linkinin sayfaya eklenmesi
  
  getbootstrap.com adresinde kütüphane içinde sunulan diğer dosyalara ve bu dosyaların hangi alanlarda kullanıldıkları bilgisine ulaşabilirsiniz.
  
  
• Javascript dosyalarının bulunduğu script kodlarının sayfaya eklenmesi

Bootstrap, bir CSS kütüphanesi olmasına karşın içerisinde accordion, dropdown menu e navigation bar gibi çeşitli davranışlara sahip öğeler de bulundurmaktadır. Bu öğelerin davranışları Javascript yoluyla tanımlanır. Bootstrap kendisi bir kütüphane olduğu gibi, içindeki öğelerin davranışları için de bir Javascript kütüphanesi kullanır. Bu kütüphane jQuery Javascript kütüphanesidir. jQuery’nin site içinde uygun şekilde çalışabilmesi için “script” kodlarının da eklenmesi önem taşımaktadır. 

 

• Son sürüm olan Bootstrap 4 kütüphanesinin kullanılabilmesi için HTML5 desteği gerekmektedir. 

Örnekler

getbootstrap.com sitesinde Bootstrap kullanılarak oluşturulan bir çok temaya ulaşmak mümkün. Geliştiriciler her geçen gün daha çekici siteler yapmaya devam ediyor. Peki Bootstrap kullanılarak yazılmış ve  aktif olarak hizmet veren tasarım harikası siteler yok mu? Tabi ki var. İşte birkaçı…