Bootstrap Nedir?

Bootstrap araç takımı, 19 Ağustos 2011 yılında eski Twitter çalışanları Mark Otto ve Jacob Thornton tarafından piyasaya sürülmüştür. Temelde bir tasarım aracı olan Bootstrap web uygulaması geliştirme araç takımı, açık kaynak kodlu olması sebebiyle türevlerinden ayrılmaktadır. Bu doğrultuda ücretsiz ve iş kolaylaştırıcı bir CSS, HTML ve JS kütüphanesi olarak karşımıza çıkmaktadır. Kütüphanesinde bulunan hemen her tarayıcıyla uyumlu eklentileri sayesinde tasarımcıların işini kolaylaşmaktadır. Bu sebeple de geniş bir kullanım alanı bulunmaktadır. Bootstrap’ın son sürümü olan Bootstrap 3; Internet Explorer, Google Chrome, Safari, Opera ve Firefox’ta sorunsuz bir şekilde çalışmaktadır.

Bootstrap Neden Kullanılır?

Bootstrap, tasarladığınız ya da tasarlamayı düşündüğünüz web sitesini kolay bir şekilde uyumlu hale getirmeye yarayan bir eklentidir. Tasarım konusunda endişelenmeden sitenizin hızlı ve sorunsuz bir şekilde dünyaya açılmasına yardımcı olur. Dolayısıyla Bootstrap, site tasarlamak isteyen ancak bu konuda yeterli kodlama bilgisine sahip olmayanların tercih edebileceği bir tasarım eklentisidir.

Örnek vermek gerekirse, bir site tasarlamak veya var olan sitenizin tasarımını değiştirmek istiyorsunuz; ancak bu konuda yeterli teknik bilgiye sahip değilsiniz. Yapacağınız en akıllıca seçim Bootstrap kullanmak olacaktır. Bootstrap’ın kütüphanesinde bulunan eklentiler, tarayıcılar ve teknolojik araçlara entegre halde bulunmaktadır. Yapmanız gereken tek şey tercih ettiğiniz eklentileri sitenize çağırmanızdır. Bootstrap, size zamandan tasarruf sağladığı gibi birçok tasarım imkanı da sunmaktadır.

Bootstrap Kullanmanın Avantajları Nelerdir?

Bunu 5 ayrı başlık altında toplayabiliriz:

1.Zamandan Tasarruf

Özellikle yeterli kodlama bilgisine sahip olmayanlar için eşsiz bir tasarım aracıdır. Sadece temel bilgiyle sitenizi düzenleyebilir ya da tasarımını değiştirebilirsiniz. Bu sayede zamanınızı kolayca nakde çevirebilirsiniz.

2.Responsive Bir Tasarım

Responsive web tasarımı, sitenizi teknolojik aletlerin ekran boyutuna göre otomatik boyutlandırmaktadır. Sitenizin içeriği değişmemekte, sadece resimler ve eklentilerin boyutu değiştirilmektedir. Bootstrap’ın sunmuş olduğu bu esnek tasarım sayesinde sitenizin genel görünümünü düşünmek yerine içeriklerinizin kalitesine odaklanabilirsiniz.

3.Özelleştirilebilir

Bootstrap’ın en önemli avantajlarından birisi özelleştirilebilir olmasıdır. İhtiyacınız ve beklentinize göre şekillenen esnek bir yapısı bulunmaktadır. Oturduğunuz yerden, dakikalar içinde sitenize yeni bir şeyler dahil edebilir ya da var olanları atabilirsiniz. Üstelik bunu, sitenizin tüm cihazlara uygun şekilde entegre olacağının gönül rahatlığıyla yaparsınız.

4.Gelecek Vadeden Bir Tasarım Aracı

Sürekli gelişen ve bünyesine yeni özellikleri katmaya devam eden Bootstrap, geleceğe entegre bir şekilde piyasadaki yerini almaktadır. Daha sık ve sabit güncelleştirmeleriyle birlikte teknik destek ekibi gelişim konusunda oldukça hızlı çalışmaktadır. Aynı zamanda kullanıcıların işbirliği içinde olmasını, birbirlerine tavsiyelerde bulunmasını ve diğer kullanıcılarla etkileşim kurmalarını kolaylaştırmaktadır. Bunun dışında Bootstrap’ın aktif bir Twitter sayfası, bir Bootstrap blogu ve hatta özel bir Slack odası da bulunmaktadır. Tüm bu soruların ve sorunların karşısında güçlü bir teknik ekibin bulunduğunu bizlere vurgulamaktadır.

5.Güçlü Bir Dokümantasyon

Bootstrap’ın dökümanları kullanıcılardan tam not almaktadır. Çoğu platformun temel sorunu net bir dokümana sahip olmaması iken Bootsrap’ta her bir kod parçası ayrıntılı olarak tanımlanmıştır. Bunun dışında temel düzeydeki kodlamaları ve örnekleri de içermektedir. Yapılması gereken örnek kodu kopyalayıp sayfaya yapıştırmaktır. Bu özelliği, temel bilgiye sahip kullanıcıların bile işini kolaylaştırmaktadır. Boostrap deneyerek öğrenmek yerine kendinizden emin bir şekilde zamandan tasarruf ederek öğrenmenizi sağlamaktadır.

Bootstrap Paketinin İçeriğinde Neler Vardır?

İndirilen Bootstrap paketi yalnızca 264 KB olmakla birlikte birçok özelliği de içinde barındırmaktadır. İndirme işlemini tamamladıktan sonra dosyada css ve js klasörleri sizi karşılamaktadır.

Bootstrap Bileşenleri

Bootstrap’ın 4 temel bileşeni bulunmaktadır:

• CSS: CSS dosyalarını içermektedir.
• JS Eklentileri: JS ve jQuery eklentileri içermektedir.
• İskele: Izgara sistemi, arka planı, stilleri vardır.
• Özelleştirmek: Çerçeveleri özelleştirebilir.

CSS

Bootstrap css klasörünün içinde;

• bootstrap.css
• bootstrap.css.map
• bootstrap.min.css
• bootstrap.min.css.map
• bootstrap-grid.css
• bootstrap-grid.css.map
• bootstrap-grid.min.css
• bootstrap-grid.min.css.map
• bootstrap-reboot.css
• bootstrap-reboot.css.map
• bootstrap-reboot.min.css
• bootstrap-reboot.min.css.map uzantılı dosyalar yer almaktadır.

Java Script (js)

Bootstrap js klasörünün içinde;

• bootstrap.js
• bootstrap.min.js uzantılı dosyalar yer almaktadır.

İskele

Bootstrap’ın temel bileşenlerinden olan iskele; ızgara sistemi (grid), arka planı ve stilleri içermektedir.

Izgara (Grid) sistemleri, hazırlanmak istenen sitenin belirlenen standarda uygun ve hızlı bir şekilde entegre olmasını sağlayan sistemlerdir. Bu sistemlerin uygulamasının ilk ayağı, tasarımcılardır. Öncelikle tasarımcı sisteme uyumlu olan bir site ortaya çıkarır. Daha sonra hazırlanan sistem üzerinde kodlar yazılır. Bu işi yapan kişilerin farklı olduğu düşünülürse tasarımcı ile arayüz geliştirici arasındaki koordinasyon eksikliği sebebiyle birçok projenin hayata geçirilememesi muhtemeldir. Tam da bu noktada ızgara sistemi, büyük bir kurtarıcı olmaktadır. Arayüz geliştiriciler için oldukça önemli bir işlevi olan ızgara sistemleri sayesinde kodlama süreleri oldukça azalmaktadır, çünkü genişlik ve boşluklar sabit olduğu için sitenin genel planı oluşturmak daha kolay bir hal almaktadır. Normalde tek tek ölçülmesi ve belirlenmesi gereken bu değerler, ızgara sistemleri aracılığıyla hazır olarak sunulmaktadır.

Bootstrap’ın ızgara sistemi de bu mantıkla çalışmaktadır. Elbette Bootstrao ızgara sisteminin önemli bir avantajı vardır. Tasarımcıların yaptıkları tasarımın arayüze doğrudan uyarlanmasını istemesine rağmen uygulamada bazı sorunlar yaşanabilmektedir. Izgara sisteminin belirlediği değerlere bağlı kalan tasarımcılar ile arayüz geliştiricileri arasında böyle bir sorun yaşanmamaktadır.

Sonuç olarak uyumlu web sitesi kodlarken ızgara sistemi kullanmak zorunlu hale gelmektedir. Bootstrap’ın iskelesinde yer alan ızgara sistemi, arka planı ve stilleri bu işlemlerin temel bilgilerle yapılması konusunda kullanıcılara büyük bir kolaylık sağlamaktadır.

Bootstrap Nasıl Kullanılır?

Bootstrap’ı internet sitesinden ücretsiz olarak indirebilirsiniz. (Bootstrap paketini indirmek için buraya tıklayınız.)

Daha önce bahsettiğimiz gibi Bootstrap’ın bünyesinde hazır kodlar bulunduğu için kopyala yapıştır kullanarak tasarımlar yapabilirsiniz. Ancak tasarım yapabilmeniz için yerine getirmeniz gereken bazı işlemler bulunmaktadır. Öncelikle Bootstrap güncel bir tasarım aracı olduğu için siteniz mutlaka HTML5 uyumlu olmalıdır. HTML5 uyumlu sayfanızı kullanmaya hazır hale getirmek içinse jquery cript ve css dosyasını site sayfanıza mutlaka eklemeniz gerekmektedir. Geriye kalan tek şey hazır kodlarla yaratıcılığınızı sergilemektir.

Diğer tasarım araçlarından farklı olarak Bootstrap, satırı 12 sütuna bölerek her sütunun farklı cihazlara uyum sağlamasına fırsat vermektedir. Örneğin bilgisayar için üç sütundan oluşan bir tasarım oluşturmayı planladınız. Bootstrap kullanarak 12 farklı satırı dörderli sütun olacak şekilde bölerek üçlü sütun yapısı oluşturabilirsiniz.

Eğer farklı elektronik cihazlar için belirlediğiniz ayarların otomatik olarak değişmesini istiyorsanız, her cihaz için olmasını istediğiniz sütun genişliklerini class etiketi içerisinde yazabilirsiniz. Örneğin, masaüstü bilgisayarlar için bir internet sayfası tasarlamak istiyorsunuz. Bu web sayfanızın ekran boyutu fark etmeksizin tüm teknolojik cihazlara uygun olmasını sağlayabilirsiniz.

Bunların haricinde internet sayfanızı tasarlamanıza yardımcı olacak dosyalar da Bootstrap klasörü içinde yer almaktadır. Bootstrap-3.0.1-dist.zip dosyası, internet sayfanızda yapabileceğiniz değişikleri için kılavuz niteliğindedir. Eğer dosyaların tamamını incelemek ve daha fazla bilgi almak istiyorsanız bootstrap-3.0.1-dist.zip dosyasına da göz gezdirebilirsiniz.

Sonuç

Bootstrap, rakibi tasarım araçları arasında git gide popüler olan ücretsiz bir framework’tür. Kullanımı kolaydır ve temel bilgiye sahip olanlar da dahil olmak üzere pek çok kişiye hitap ettiği için en çok tercih edilen tasarım araçları arasında yer almaktadır. Kütüphanesinde hazır kodlar barındırması sebebiyle zamandan tasarruf sağlamaktadır. Bunun yanı sıra özelleştirilebilen ve esnek bir yapısı bulunmaktadır. Dolayısıyla internet sitesi hazırlamak veya hazır bir internet sitesinin tasarımını değiştirmek isteyenlerin memnun kalacağı etkili bir yardımcıdır.

Bu blog içeriğimizde Bootstrap’ın ne olduğuna ve kullanımına dair temel bilgileri öğrendiniz. Eğer siz de internet sitesi tasarlamak istiyorsanız Bootstrap kullanmak için en doğru zamandasınız