Twitter Bootstrap kendisini bize, hızlı ve kolay web geliştirme için şık, sezgisel ve güçlü bir front-end framework olarak tanıtıyor. Bootstrap kullanıma sunduğu css, javascript kütüphaneleri ve componentler ile vaadettiği yapıda web geliştirimini gerçekten oldukça kolaylaştırıyor. Daha önceki bir yazımda yazılımcıların neden framework kullanmaya ihtiyaçları olduğundan bahsetmiştim. Hatırlatmak gerekirse FW kullanımının en önemli nedeni ZAMANDAN TASARRUF ve TEMİZ ve ANLAŞILABİLİR kodlar yazmaktı. Bu FW bize gerçekten çok hızlı ve temiz bir şekilde frond-end kodlarımızı oluşturmamızı sağlıyor.

2.2.1 sürümü yayınlanan Bootstrap, scaffolding kategorisi altında grid, layout’lar ve mobil cihazları da kapsayan responsive design, Base CSS kategorisi altında tablo, form, buton, imaj ve icon dosyaları, Components kategorisi altında drop down menüler, etiket ve badges’ler, breadcrumbs, progress bars ve daha pek çok bileşen ve aracı kullanma imkanı sunuyor.

Peki bu araçları, özellikleri kullanabilmemiz için ne yapmamız gerekiyor? Sorunun cevabı öncelikle bu FW'yi indirip projemize dahil etmemiz gerekiyor. Bunun için http://twitter.github.com/bootstrap/index.html adresinde giderek buradan FW yi indirebiliriz. Bootstrap'ın sitesini biraz incelerseniz kütüphanenin sahip olduğu fonksiyonları çok basit ve düzgün bir şekilde yazmış olduğunu göreceksiniz yani dökümantasyonu gerçekten iyi. Çok fazla adaptasyon sorunu yaşamadan Bootstrap'ı kullanmaya başladığınızı farkedeceksiniz. Bootstrap için zannımca bu kadar yazmak yeterli artık kolları sıvayıp çalışabilirsiniz (çalışabiliriz) :).

Basit ama kullanışlı bir kaç bootstrap CSS özellikleri ile alakalı örnekler göstermek istiyorum. Diğer başlıklarla ilgili örnek bootstrap'ın resmi sitesinde yer alıyor inceleyebilirisiz.

1. Bootstrap ile açılır kutu oluşturmak.

Bu şekilde şık bir açılır kutu oluşturmak istediğimizi varsayalım, html kodlarını yazmamız gerekiyor, CSS kodlarını yazmamız ve javascript ile canlandırmamız gerekiyor normal şartlarda :). Bootstrap ile bu açılır kutu 3-5 satır kod ile hazır hale geliyor. Buyrun kodlar;

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Görüldüğü üzere biz sadece html kodlarımızı oluşturuyoruz ve Bootstrap' a ait class belirtiyoruz gerisini bootstrap hallediyor bizim için.

2. Menu List Oluşturmak

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Tek yapmamız gereken HTML kodlarımızı oluşturmak ve bootstrap'ın bizim için hazırlamış olduğu css kütüphanesini kullanmak hepsi bu. Bu arada açılır kutu ve liste üzerinde gelen iconlar bootstrap kütüphanesi ile birlikte gelen iconlar. Yani harici hiç bir icon hazırlamanıza yada indirmenize gerek kalmıyor.

Bootstrap Icon-set

Herkese iyi çalışmalar

Fettah KURTULUŞ

Computer Engineer & Sr. Web Developer