BOOTSTRAP NEDİR?

Bootstrap, hazır CSS sınıfları, 12 sütunlu grid sistemi ve JavaScript bileşenleriyle responsive arayüzleri sıfırdan stil yazmadan kurmanızı sağlayan açık kaynak bir front-end framework'tür. Bu yazıda nasıl çalıştığını, ne zaman doğru tercih olduğunu ve Tailwind gibi modern alternatifler karşısında nerede durduğunu öğreneceksiniz.

1. Bootstrap nedir?

Bootstrap; HTML, CSS ve JavaScript kullanan açık kaynak bir front-end framework'tür. Yani bir araç değil, geliştirme için hazır bir altyapıdır. Sayfa üzerine ekleyince şu unsurları otomatik getirir:

• Önceden tasarlanmış CSS sınıfları (button, card, navbar gibi)
• 12 sütunlu responsive grid sistemi
• JavaScript bileşenleri (modal, carousel, dropdown, accordion)
• Mobil öncelikli tasarım yaklaşımı
• Tutarlı tipografi ve renk paleti

Geliştirici bir buton oluşturmak için stil yazmak yerine sadece şu HTML'i yazar:

<button class="btn btn-primary">Tıkla</button>

Bootstrap bu sınıfları (btn ve btn-primary) görüp butona mavi arka plan, beyaz yazı, yuvarlak köşe, padding ve hover efekti otomatik uygular; her sınıfın tam karşılığı ve canlı örnekleri resmi Bootstrap dokümantasyonunda bulunur. Geliştirici tek satır CSS yazmadan profesyonel görünümlü bir buton elde eder.

2. Bootstrap'in tarihi

Bootstrap, 2010'da Twitter'da Mark Otto ve Jacob Thornton tarafından şirket içi araç olarak başladı. Twitter'ın farklı ürün ekipleri birbirinden bağımsız arayüzler üretiyordu ve tutarsızlık problemdi. Otto ve Thornton ekip içinde "ortak dil" oluşturmak için Twitter Blueprint adında bir kütüphane geliştirdiler.

Açık kaynağa geçiş

Ağustos 2011'de bu araç GitHub'da açık kaynak olarak yayınlandı. Adı Bootstrap'e çevrildi. Yayınlanışından sadece bir ay sonra GitHub'ın en yıldızlı projesi haline geldi. Bugün GitHub'da 170.000+ yıldıza sahip.

Önemli sürüm geçişleri

• Bootstrap 1 (2011): İlk halk sürümü, statik CSS odaklı
• Bootstrap 2 (2012): Responsive tasarım eklendi
• Bootstrap 3 (2013): Mobile-first yaklaşım, flat tasarım
• Bootstrap 4 (2018): Flexbox grid, Sass altyapısı
• Bootstrap 5 (2021): jQuery bağımlılığı kaldırıldı, CSS variables, RTL desteği
• Bootstrap 5.3 (2023): Karanlık mod desteği yerleşik geldi

Bugün yeni başlayanlar için doğrudan Bootstrap 5 ile başlamak doğru tercihtir; eski sürümler hala kullanılan eski projeler için referans olarak kalıyor.

3. Grid sistemi: en güçlü özelliği

Bootstrap'i Bootstrap yapan şeyin başında 12 sütunlu grid sistemi gelir. Sayfayı yatay olarak 12 eşit parçaya böler; her bileşen bu sütunlardan istediği kadarını kaplar.

<div class="container">
  <div class="row">
    <div class="col-md-8">Ana içerik (8 sütun)</div>
    <div class="col-md-4">Yan sütun (4 sütun)</div>
  </div>
</div>

Burada col-md-8 "orta ekran (md) boyutundan itibaren 8 sütun genişliğinde" anlamına gelir. Mobilde her ikisi de tam genişliğe düşer; tablet ve üzerinde yan yana sığar. Tek satır CSS yazmadan responsive davranış kazanılır.

Bootstrap'in kırılma noktaları (breakpoints)

Bu beş kırılma noktası modern cihazların büyük bölümünü kapsar. Bir bileşen farklı ekranda farklı davransın isteniyorsa, birden fazla sınıf eklenir:

<div class="col-12 col-md-6 col-lg-4">
  Mobilde tam, tablet'te yarım, laptop'ta üçte bir
</div>

4. Hazır bileşenler

Bootstrap 50+ hazır bileşenle gelir. En sık kullanılanlar:

Buton ve form bileşenleri

• Button: btn btn-primary, btn-success, btn-danger gibi 8 hazır renk varyantı
• Form control: Input, select, textarea hazır stilleri
• Input group: Inputa ikon veya buton eklemek için
• Form validation: Doğrulama mesajları için hazır sınıflar

Layout bileşenleri

• Navbar: Mobilde otomatik hamburger menüye düşen üst menü
• Card: Ürün veya makale kartı için kutu yapısı
• Modal: Açılır pencere
• Offcanvas: Yandan kayan menü/panel

Etkileşim bileşenleri

• Carousel: Görsel slayt gösterisi
• Accordion: Açılır kapanır panel (SSS gibi)
• Tooltip ve Popover: Üzerine gelince bilgi gösteren küçük baloncuk
• Alert: Uyarı, bilgi, başarı mesaj kutuları
• Progress bar: Yükleme göstergesi

5. Bootstrap nasıl projeye eklenir?

Üç ana yöntem vardır.

1. CDN üzerinden (en hızlı)

Sayfanın <head> bölümüne bir satır eklemek yeterli. Bootstrap dosyaları başka bir sunucudan çekilir.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Avantajı: kurulum gerektirmez. Dezavantajı: dış sunucuya bağımlılık.

2. Dosya indirip projeye koyma

getbootstrap.com sitesinden CSS ve JS dosyaları indirilir, projenin kendi klasörüne yerleştirilir. CDN'e göre daha bağımsız.

3. NPM ile (modern projelerde)

npm install bootstrap

React, Vue, Angular gibi modern framework'lerle çalışan projelerde tercih edilir. Sass değişkenlerini özelleştirme imkanı verir.

6. Bootstrap kullanmanın avantajları

1. Hızlı geliştirme: Tasarım kararlarını sıfırdan vermeden hızlı prototip kurulur
2. Responsive otomatik: Mobil, tablet, masaüstü uyumu hazır gelir
3. Tarayıcı uyumluluğu: Tüm modern tarayıcılarda test edilmiş
4. Tutarlılık: Aynı projenin farklı sayfaları kendi içinde uyumlu olur
5. Geniş topluluk: Sorun çözmek için Stack Overflow'da binlerce çözülmüş soru var
6. Belgeler: Bootstrap'in dökümantasyonu örnek odaklıdır; her bileşenin canlı örneği vardır

7. Bootstrap kullanmanın dezavantajları

1. Site büyüklüğü: Bootstrap CSS+JS toplam yaklaşık 200 KB; sadece birkaç bileşen için yüklemek ağır
2. Sınıf yığını: HTML'inde class="d-flex justify-content-between align-items-center mt-3 mb-4" gibi uzun sınıf listeleri oluşur
3. Görsel benzerlik: Bootstrap kullanan siteler birbirine benzer; özgün marka kimliği için ekstra özelleştirme gerekir
4. JavaScript bileşenleri: Tüm JS bileşenleri kullanılmıyorsa bile yüklenir (sürüm 5'te kısmen çözüldü)

8. Bootstrap alternatifleri

Bootstrap modern olmasına rağmen alternatifleri de değerlendirilebilir.

Tailwind CSS

Son yılların yıldızı. Bootstrap "hazır bileşen" verirken Tailwind "utility class" verir; yani küçük tek görevli sınıflarla istediğiniz tasarımı kurmanızı sağlar. Sonuç daha özgün ama öğrenme eğrisi daha dik. Detaylar için Tailwind CSS eğitimi sayfasına bakılabilir.

Bulma

Bootstrap'e benzeyen ama jQuery veya JavaScript gerektirmeyen sadece CSS framework. Hafif ve modern. Pazar payı küçük ama temiz syntax tercih edenler için sağlam alternatif.

Foundation

ZURB tarafından geliştirilen, kurumsal projelerde tercih edilen alternatif. Bootstrap'e benzer kapsamda ama daha az popüler.

Material UI / Chakra UI

React projelerinde Bootstrap yerine sıkça tercih edilen bileşen kütüphaneleri. Google'ın Material Design rehberini takip ederler.

9. Hangi proje için hangisi?

• Hızlı prototip, kurumsal site, admin paneli: Bootstrap
• Özgün tasarım, modern proje: Tailwind CSS
• React/Vue/Angular projesi: Material UI, Chakra UI veya Tailwind
• Sadece CSS, minimal JS: Bulma
• Çok ufak proje (5-10 sayfa): Framework gerek yok, vanilla CSS yeterli

10. Bootstrap öğrenmeye başlamak

Bootstrap öğrenmek nispeten kolay; çünkü bilgi resmi dökümantasyonda örneklerle hazır. İki haftalık çalışma planı tipiktir:

• 1. hafta: Grid sistemi, container, row, col mantığı + temel buton ve form sınıfları
• 2. hafta: Navbar, card, modal, carousel gibi bileşenler + responsive utilities

İlk hafta sonunda kendi başına responsive bir sayfa kurabilir hale gelirsiniz. HTML, CSS ve Bootstrap'i birlikte temel alan bir web tasarımı eğitimi programı bu süreci hızlandırır; framework öğrenmenin yanı sıra modern CSS pratiği de paralel ilerler. İkinci hafta sonunda profesyonel görünümlü bir kurumsal site tamamlayabilirsiniz.

11. Görünen Tablo

Bootstrap; 2011'den beri web geliştirme dünyasının en yaygın araçlarından biri. Tasarım kararlarını sıfırdan vermeden hızlı prototip kurmanızı, mobil uyumlu siteyi tek bir framework ile hazır almanızı ve onlarca bileşeni tek satırla projeye eklemenizi sağlar. Modern alternatifleri (Tailwind, Bulma, Material UI) belirli durumlarda daha iyi seçim olsa da Bootstrap'in geniş topluluğu, sağlam dökümantasyonu ve kanıtlanmış kararlılığı onu hâlâ en güvenli başlangıç noktası yapıyor.