Makale Başlıkları
Kısaca
Bootstrap, web sitelerini tüm ekran boyutlarına uyumlu (responsive) hale getirmeyi kolaylaştıran, açık kaynaklı ve ücretsiz bir CSS/JavaScript çatısıdır (framework). Hazır grid sistemi, buton, menü ve bileşenleri sayesinde tasarımı sıfırdan kodlamadan hızlıca modern arayüzler oluşturabilirsiniz. Güncel sürüm olan Bootstrap 5, jQuery bağımlılığını kaldırarak daha hafif ve hızlı bir yapıya kavuşmuştur.
- 12 sütunlu esnek grid sistemiyle mobil öncelikli (mobile-first) tasarım
- Bootstrap 5 ile jQuery gitti; artık saf (vanilla) JavaScript kullanılıyor
- CDN bağlantısıyla tek satırda projeye eklenebilir; Sass ile derinlemesine özelleştirilebilir
Bootstrap, tasarlanacak web sitelerinin tablet, telefon ve bilgisayar gibi her türlü ekran çözünürlüğüne duyarlı olacak şekilde ayarlanmasına yarayan açık kaynak kodlu bir framework olarak tanımlanabilir. Bir web sitesi tasarımında ihtiyaç duyulan tüm faktörlerin önceden düşünüldüğü ve hazır hale getirildiği bir yapıdır. İçerisinde hazır tablo, etiket, buton, açılır menü ve navigasyon barı bulunur; bu sayede site kolayca responsive (uyumlu) hale getirilir.
Bootstrap içerisinde hazır CSS kodları bulunur; böylece hazır element ve nesnelere istenildiği gibi müdahale edilebilir. Diğer framework’lerden en belirgin farkı, güçlü bir grid (ızgara) sistemi barındırmasıdır. Grid, sayfayı eşit ölçülerde ızgaralara bölerek responsive tasarımı kolaylaştıran bir yapıdır. Yani web sayfanızı 12 sütuna bölebilir ve ekran çözünürlüğü küçüldükçe içeriğin nasıl konumlanacağını istediğiniz gibi tasarlayabilirsiniz.
Bootstrap Nedir?
Bootstrap, eskiden Twitter’da çalışan Mark Otto ve Jacob Thornton tarafından 2011 yılında oluşturulmuş bir ön yüz (front-end) geliştirme araç takımıdır. İlk adı “Twitter Blueprint” olan proje, kısa sürede dünyanın en popüler HTML, CSS ve JavaScript kütüphanesi haline gelmiştir. İyi görünümlü web siteleri oluşturmaya imkan tanıyan araç, özellikle responsive web tasarımı için tercih edilir. Responsive web tasarımı, bir sitenin masaüstünden akıllı telefona kadar her cihazda düzgün görünmesini sağlayan yaklaşımdır.
Bootstrap’in temel felsefesi “mobil öncelikli” (mobile-first) tasarımdır. Yani stiller önce küçük ekranlar için tanımlanır, ardından medya sorguları (media queries) ile büyük ekranlara doğru genişletilir. Bu yaklaşım, ziyaretçilerin çoğunun mobil cihazlardan geldiği günümüzde daha hızlı ve tutarlı bir kullanıcı deneyimi sunar. Bootstrap ile geliştirilen bir arayüz Chrome, Firefox, Safari, Edge ve Opera gibi tüm modern tarayıcılarda uyumlu çalışır.
Bootstrap Ne İşe Yarar? Neden Kullanılır?
Bir web sitesinin görünümünü sıfırdan CSS ile yazmak hem zaman alır hem de her tarayıcıda farklı davranış (browser inconsistency) riskini beraberinde getirir. Bootstrap bu iki sorunu birden çözer. Kullanmanızı sağlayan başlıca faydaları şöyle özetleyebiliriz:
- Hız: Hazır bileşenlerle prototip ve üretim arayüzleri çok daha kısa sürede hazırlanır.
- Tutarlılık: Tüm tarayıcı ve cihazlarda aynı görünümü garanti eder.
- Responsive yapı: Ek uğraş olmadan mobil uyumlu (mobile-friendly) sonuç verir; bu da SEO açısından önemlidir.
- Özelleştirilebilirlik: Sass değişkenleriyle renk, boşluk ve tipografi kolayca değiştirilir.
- Geniş topluluk: Milyonlarca geliştirici, sayısız tema ve hazır şablon kaynağı bulunur.
Cihazdan bağımsız sezgisel bir deneyim sunmak için küçük ekran boyutlarına uyum sağlayan siteler, Bootstrap sayesinde esnek bir düzene kavuşur. Arama motoru optimizasyonu (SEO) değerini artırmaya da yardımcı olan araç, siteye kolayca eklenebilen faydalı bileşenler içerir: navigasyon barları (navbar), açılır menüler (dropdown), ilerleme çubukları (progress bar), kartlar (card), modal pencereler ve daha fazlası.
Bootstrap 5 ile Gelen Yenilikler
Bootstrap uzun yıllar boyunca birçok büyük sürüm çıkardı ve güncel ana sürüm Bootstrap 5 (5.3.x dalı) oldu. Bu sürüm, önceki nesillere göre önemli değişiklikler getirdi. En dikkat çekeni, jQuery bağımlılığının tamamen kaldırılmasıdır. Artık tüm etkileşimli bileşenler saf (vanilla) JavaScript ile çalışır; bu da daha küçük dosya boyutu ve daha hızlı sayfa yükleme anlamına gelir.
Bootstrap 5 ile gelen diğer önemli değişiklikleri şu tabloda karşılaştırabilirsiniz:
| Özellik | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| jQuery bağımlılığı | Var (zorunlu) | Yok (kaldırıldı) |
| Grid kırılım noktaları | xs, sm, md, lg, xl | + yeni xxl (≥1400px) |
| İkon seti | Glyphicons yok (BS3’te vardı) | Ayrı Bootstrap Icons kütüphanesi |
| Sass derleyici | Libsass (eski) | Dart Sass (güncel) |
| Boşluk (gutter) sistemi | Negatif margin | Yeni g-* yardımcı sınıfları |
| RTL (sağdan sola) desteği | Yok | Yerleşik olarak var |
| Renk modları | Yok | Koyu mod (dark mode) desteği (5.3) |
Önemli bir not: Bootstrap 3’te bulunan Glyphicons ikon seti, Bootstrap 4 ile birlikte çekirdek yapıdan çıkarılmıştır. Güncel projelerde ikon için ayrı yayınlanan Bootstrap Icons kütüphanesini veya Font Awesome gibi alternatifleri kullanmanız gerekir.
Bootstrap Kurulumu ve Kullanımı
Bootstrap’i projenize eklemenin en pratik yolu CDN (İçerik Dağıtım Ağı) bağlantısını kullanmaktır. Bu yöntemde hiçbir dosya indirmeden, HTML sayfanızın <head> etiketine tek bir CSS satırı, </body> etiketinden hemen önce ise tek bir JavaScript satırı eklemeniz yeterlidir. CDN üzerinden çağırdığınız dosyalar dünya çapında dağıtılmış sunuculardan geldiği için ziyaretçiye en yakın noktadan hızlıca yüklenir.
Temel bir Bootstrap 5 iskeleti şu şekilde görünür:
<!doctype html>
<html lang=”tr”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<h1>Merhaba Bootstrap!</h1>
<script src=”bootstrap.bundle.min.js”></script>
</body>
</html>
Dikkat edilmesi gereken en kritik satır viewport meta etiketidir. Bu etiket olmadan responsive davranış mobil cihazlarda düzgün çalışmaz. İkinci yöntem ise dosyaları indirip sunucunuza yüklemek; üçüncüsü ise npm ile kurup Sass kaynaklarını kendi ihtiyacınıza göre derlemektir. Sass yöntemi, yalnızca kullandığınız bileşenleri dahil ederek dosya boyutunu küçültmek isteyen ileri düzey geliştiriciler için idealdir.
Bootstrap Grid Sistemi Nasıl Çalışır?
Bootstrap’in kalbi 12 sütunlu grid sistemidir. Her satır (.row) 12 eşit birime bölünür; siz de bu 12 birimi istediğiniz gibi dağıtırsınız. Örneğin üç eşit sütun için her birine 4 birim (.col-md-4), iki sütun için 6’şar birim verirsiniz. Sütun sınıflarındaki harf eki, hangi ekran boyutundan itibaren düzenin geçerli olacağını belirtir:
| Sınıf öneki | Cihaz | Kırılım noktası |
|---|---|---|
| .col- | Ekstra küçük (telefon) | <576px |
| .col-sm- | Küçük (büyük telefon) | ≥576px |
| .col-md- | Orta (tablet) | ≥768px |
| .col-lg- | Büyük (masaüstü) | ≥992px |
| .col-xl- | Çok büyük | ≥1200px |
| .col-xxl- | Ekstra büyük (geniş ekran) | ≥1400px |
Bir sütunu hem masaüstünde hem de telefonda farklı genişlikte göstermek isterseniz sınıfları birleştirebilirsiniz. Örneğin bir kart masaüstünde üçlü (.col-md-4), telefonda ise tam genişlikte (.col-12) görünsün diyorsanız, aynı elemana her iki sınıfı da verirsiniz. Bu esneklik, tek bir HTML yapısıyla tüm cihazlara uygun tasarım üretmenin sırrıdır.
Bootstrap Özellikleri
Bootstrap, esnek düzen sağlaması ve SEO değerini artırmaya yardımcı olması gibi özellikleriyle sıklıkla tercih edilen bir web geliştirme aracıdır. Aracın öne çıkan özelliklerini sıralayacak olursak:
- Responsive yapı: Kendine ait grid sistemiyle her ekrana uyum sağlar.
- Responsive görseller: .img-fluid sınıfıyla resimler kapsayıcıya göre otomatik ölçeklenir.
- Hazır bileşenler: Buton, form, kart, modal, alert ve daha fazlası kullanıma hazır gelir.
- JavaScript eklentileri: Modal, carousel, tooltip gibi etkileşimler jQuery’siz çalışır.
- Güçlü dokümantasyon: Her bileşen için açıklama ve örnek kod resmi sitede mevcuttur.
- Geniş topluluk: Milyonlarca kullanıcı, çok sayıda ücretsiz ve premium tema.
- Yardımcı sınıflar (utilities): Boşluk, renk, gölge ve hizalama işlemleri tek sınıfla yapılır.
Bootstrap 3 döneminde ikon için kullanılan Glyphicons seti güncel sürümlerde çekirdekten çıkarıldığı için, ikon ihtiyacınızı ayrı yayınlanan Bootstrap Icons kütüphanesiyle karşılamanızı öneririz. Bu set, SVG tabanlıdır ve ölçeklendiğinde bulanıklaşmaz.
Bootstrap’in Ana Dosyaları
Bootstrap, işlevini iki temel dosya üzerinden yürütür:
- bootstrap.css (veya bootstrap.min.css)
- bootstrap.bundle.js (veya bootstrap.bundle.min.js)
bootstrap.css dosyası, sitenin düzenini yöneten CSS çerçevesidir. Sayfa içeriğini ve yapısını biçimlendirir; bir kenarın genişliğinden metin stillerine, tablolardan görsel düzenlere kadar tüm görsel unsurları kontrol eder. Bir kenar boşluğunu ayarlamak için saatlerce uğraşmanıza gerek kalmaz, hazır sınıfları uygulamanız yeterlidir.
bootstrap.bundle.js dosyası ise etkileşimli bileşenleri çalıştırır. Modal pencereler, açılır menüler, sekmeler ve carousel gibi dinamik unsurlar bu dosya sayesinde işler. “Bundle” sürümü, gerekli olan Popper kütüphanesini de içinde barındırdığı için ayrıca bir şey eklemenize gerek kalmaz. Bootstrap 5 ile bu dosya artık jQuery gerektirmez.
Not: Bootstrap 3’ün üçüncü dosyası olan Glyphicons ikon fontu, sonraki sürümlerde kaldırılmıştır; bu nedenle güncel projelerde iki dosya yeterlidir.
Bootstrap Kodları ve Örnekleri
Küçük, orta ve büyük her türlü ekrana uyarlanmış tasarımlar için hazır Bootstrap kodlarını kullanabilirsiniz. Sık ihtiyaç duyulan bazı örnekler:
Bir butonu ortalamak için:
<div class=”d-flex justify-content-center”> <button class=”btn btn-primary”>Ortalanmış buton</button> </div>
12 sütunu üçe bölerek üç eşit sütun oluşturmak için:
<div class=”row”>
<div class=”col-md-4″>Sütun 1</div>
<div class=”col-md-4″>Sütun 2</div>
<div class=”col-md-4″>Sütun 3</div>
</div>
Responsive bir görsel için:
<img src=”resim.jpg” class=”img-fluid” alt=”Açıklama”>
Basit bir uyarı (alert) kutusu için:
<div class=”alert alert-success” role=”alert”>İşlem başarılı!</div>
Bir elemanın farklı cihazlarda farklı sütun genişliğinde görünmesini isterseniz sınıfları birleştirin. Örneğin telefonda tam, tablette yarım, masaüstünde üçte bir genişlik için: <div class=”col-12 col-md-6 col-lg-4″></div>. Böylece tek bir yapı ile tüm cihazlara uyumlu bir düzen elde edersiniz.
Bootstrap ile Sitenizi Hızlı ve Güvenli Yayınlayın
Bootstrap ile modern ve mobil uyumlu bir arayüz hazırlamak yalnızca ilk adımdır. Sitenizin ziyaretçilere hızlı açılması, kesintisiz erişilebilir olması ve güvende kalması için sağlam bir barındırma altyapısına da ihtiyacınız vardır. Alastyr’ın LiteSpeed + LSCache altyapısı, CSS/JS dosyalarınızın ve statik içeriğin daha hızlı sunulmasını sağlayarak Bootstrap tabanlı sayfalarınızın açılış süresini kısaltır. İzmir’deki kendi veri merkezimizde, N+1 yedekli ve Tier III standartlarındaki altyapımızda projelerinizi güvenle barındırabilirsiniz.
Web projeleriniz için alan adı (domain) sorgulayabilir, sitenizi yayınlamak için hızlı ve güvenli hosting paketlerimizden yararlanabilir, daha fazla kaynak gerektiren işler için bulut sunucu çözümlerimizi tercih edebilirsiniz. Ücretsiz SSL, günlük yedekleme ve 7/24 Türkçe destek tüm paketlerde standarttır.
Sıkça Sorulan Sorular
Bootstrap nedir ve ne işe yarar?
Bootstrap, web sitelerini tüm ekran boyutlarına duyarlı (responsive) hale getirmeyi kolaylaştıran, açık kaynaklı ve ücretsiz bir CSS/JavaScript çatısıdır. Hazır grid sistemi, buton, menü ve bileşenleri sayesinde tasarımı sıfırdan kodlamadan hızlıca modern ve mobil uyumlu arayüzler oluşturmanızı sağlar.
Bootstrap ücretsiz mi?
Evet, Bootstrap tamamen ücretsiz ve açık kaynak kodludur. MIT lisansı altında dağıtılır; hem kişisel hem de ticari projelerde herhangi bir ücret ödemeden kullanabilirsiniz.
Bootstrap’in güncel sürümü hangisidir?
Güncel ana sürüm Bootstrap 5’tir (5.3.x dalı). Bu sürüm jQuery bağımlılığını kaldırmış, yeni xxl kırılım noktasını, koyu mod (dark mode) desteğini ve Dart Sass ile derinlemesine özelleştirme imkanını getirmiştir.
Bootstrap kullanmak için jQuery gerekli mi?
Hayır. Bootstrap 5 ile jQuery bağımlılığı tamamen kaldırılmıştır. Tüm etkileşimli bileşenler artık saf (vanilla) JavaScript ile çalışır; bu da daha hafif dosyalar ve daha hızlı yükleme demektir. Yalnızca Bootstrap 4 ve öncesi sürümlerde jQuery gerekir.
Bootstrap grid sistemi kaç sütundan oluşur?
Bootstrap grid sistemi 12 sütundan oluşur. Her satır 12 eşit birime bölünür; siz de bu birimleri istediğiniz gibi dağıtırsınız. Örneğin üç eşit sütun için her birine 4 birim (.col-md-4), iki sütun için 6’şar birim verirsiniz.
Bootstrap projeye nasıl eklenir?
En pratik yöntem CDN bağlantısı kullanmaktır: CSS dosyasını sayfanın head bölümüne, JavaScript dosyasını ise body etiketinin kapanışından hemen önce eklersiniz. Alternatif olarak dosyaları indirip sunucunuza yükleyebilir veya npm ile kurup Sass kaynaklarını kendiniz derleyebilirsiniz.
Bootstrap ile Glyphicons ikonları hala kullanılıyor mu?
Hayır. Glyphicons ikon seti Bootstrap 3 döneminde vardı ancak Bootstrap 4 ile birlikte çekirdek yapıdan çıkarıldı. Güncel projelerde ikon için ayrı yayınlanan Bootstrap Icons kütüphanesini veya Font Awesome gibi alternatifleri kullanmanız gerekir.
Bootstrap SEO için faydalı mı?
Bootstrap’in kendisi doğrudan bir SEO aracı değildir; ancak ürettiği mobil uyumlu ve hızlı yüklenen responsive tasarım, Google’ın mobil öncelikli indeksleme kriterlerini karşılamaya yardımcı olur. Bu da dolaylı olarak arama motoru sıralamanıza olumlu katkı sağlar.
Bootstrap’i hangi tür web sitelerinde kullanabilirim?
Kurumsal web sitelerinden e-ticaret projelerine, yönetim panellerinden kişisel bloglara kadar hemen her türlü projede kullanabilirsiniz. Özellikle hızlı prototip oluşturmak ve tutarlı, tüm cihazlarda düzgün görünen arayüzler geliştirmek için idealdir.
