9.5 KiB
title, category, date, readTime, author, slug, excerpt, coverImage, canonicalUrl
| title | category | date | readTime | author | slug | excerpt | coverImage | canonicalUrl |
|---|---|---|---|---|---|---|---|---|
| CSS Frameworkleri Tanıyoruz | 1. Bölüm: Bootstrap | General | 2025-04-27 | 4 min read | Poyraz Avsever | css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap | CSS Frameworkleri Tanıyoruz | 1. Bölüm: Bootstrap CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıcı oluyor. Kendi css dosyalarımızı sıfırdan yazmak yerine … | /blog/images/css-frameworkleri-tan-yoruz-1-b-l-m-bootstrap-cover.jpg | https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoruz-1-b%C3%B6l%C3%BCm-bootstrap-232619268cc8 |
CSS Frameworkleri Tanıyoruz | 1. Bölüm: Bootstrap
CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıcı oluyor. Kendi css dosyalarımızı sıfırdan yazmak yerine, önceden hazırlanmış, optimize edilmiş ve test edilmiş kodlardan faydalanabiliyoruz. Bu yazı serisi boyunca, en popüler frameworkleri adım adım birlikte öğreneceğiz. Serimizin ilk konuğu: Bootstrap!
Bootstrap Nedir?
Bootstrap, Twitter mühendisleri tarafından geliştirilen, açık kaynaklı bir CSS frameworküdür. Temel amacı, hızlı ve uyumlu (responsive) web siteleri oluşturmayı kolaylaştırmaktır.
- İlk Çıkış Yılı: 2011
- Geliştiriciler: Mark Otto ve Jacob Thornton
- Ana Özellikleri: Responsive grid sistemi, hazır UI bileşenleri, JavaScript pluginleri ve hızlı prototipleme imkanı.
Neden Bootstrap?
Günümüzde hangi kurumdan, videodan ya da dökümantasyonlardan front-end öğrenmeye çalışıyorsanız karşınıza kesinlikle “Bootstrap” çıkmıştır çünkü:
- Kolay Başlangıç: CDN üzerinden birkaç satır kodla hızlıca çalışmaya başlayabilirsin.
- Mobil Öncelikli: Tüm tasarımlar mobil uyumlu düşünülerek geliştirilmiştir.
- Topluluk Desteği: Sorun yaşadığında veya geliştirmek istediğinde çok geniş bir kaynak ve topluluk seni bekliyor.
- Kapsamlı Bileşenler: Düğmeler, formlar, modallar, navigasyon barları ve daha fazlası hazır halde gelir.
Nasıl Başlıyoruz?
- Yöntem: CDN ile En Hızlı Başlangıç
HTML dosyana sadece şu satırları eklemen yeterli:
<script src\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"\></script\>2. Yöntem: NPM Üzerinden Kurulum
Projeni biraz daha büyük ölçekli yönetmek istersen:
npm install bootstrap
İlk Bootstrap Deneyimimiz: Basit Bir Sayfa
Şimdi Bootstrap’ı küçük bir örnekle kullanalım:
<html lang\="tr"\> <head\> Bootstrap Başlangıç </head\>Merhaba Bootstrap!
CSS frameworkleri serimizin ilk adımındasınız 🎉 Bana Tıkla! </html\>
Ve işte bu kadar.
1. Bootstrap’ın Temel Yapısı
Bootstrap projeleri, genellikle şu 3 temel yapı üzerine kuruludur:
- Container: İçerikleri sınırlamak ve hizalamak için kullanılır.
- Row: Satır oluşturur. Grid sisteminin temel taşıdır.
- Col: Sütunları ifade eder. Responsive tasarımın kalbidir.
Container Nedir?
container sınıfı, içerikleri ortalamak ve belirli bir genişlikte tutmak için kullanılır.
İstersen tam genişlikte bir container da kullanabilirsin:
2. Bootstrap Grid Sistemi
Bootstrap’ın en güçlü özelliklerinden biri: 12 kolonlu grid sistemi. Bu sistemle her cihaz boyutuna göre düzenlemeler yapabiliyoruz.
Basit Grid Kullanımı
Yukarıdaki kod 3 eşit genişlikte sütun oluşturuyor.
Özel Genişlik Belirleme
İstersen sütunlara özel genişlikler de verebilirsin:
Responsive Grid
Farklı ekran boyutlarına göre farklı genişlikler ayarlayabilirsin:
col-12: Küçük ekranlarda tüm satırı kapla.col-md-8: Orta ve daha büyük ekranlarda 8 kolon kapla.
3. Bootstrap Bileşenleri
Bootstrap, tonlarca hazır bileşen sunuyor. Birkaç önemli bileşene beraber bakabilirz:
Düğmeler (Buttons)
<button class="btn btn-primary">Primary Düğme</button>
<button class="btn btn-success">Success Düğme</button>
<button class="btn btn-danger">Danger Düğme</button>
Renk kodları ile istediğin tarzı seçebilirsin.
Kartlar (Cards)
Kart Başlığı
Bu bir Bootstrap kart bileşenidir. Bir yere git
Kartlar, görsel + içerik kombinasyonları için çok ideal.
Navigasyon Bar (Navbar)
Logo- Ana Sayfa
-
Hakkında
Mini Proje: Bootstrap ile Basit Bir İletişim Sayfası
Öğrendiklerimizi pekiştirmek için birlikte küçük bir iletişim sayfası tasarlayalım.
<html lang\="tr"\> <head\> İletişim Formu </head\>Bize Ulaşın
AdınızE-posta AdresinizMesajınız </textarea\> </div\> <button type\="submit" class\="btn btn-primary w-100"\>Gönder</button\> </form\> </div\> <p dir="auto"></body><br> </html></p> <h3>Bu Mini Projede Neler Öğrendik?</h3> <ul dir="auto"> <li>Container ve grid yapısını kullanarak belli bir düzen oluşturduk.</li> <li>Form elemanlarını Bootstrap ile daha şık hale getirdik.</li> <li>Button ve spacing (boşluk) classlarını (py-5, mb-3, w-100) kullandık.</li> </ul> <p dir="auto">Bu küçük örnek, Bootstrap ile bir tasarımın ne kadar hızlı oluşturabileceğinizi gösteriyor. Yukarıdaki kodları inceleyerek bir çok noktayı anlayabilirsiniz.</p> <h2>Bootstrap’ı Daha İyi Öğrenmek İçin Ne Yapabilirsin?</h2> <ul dir="auto"> <li><strong>Bootstrap Resmi Dokümantasyonu</strong> sürekli güncelleniyor ve harika örneklerle dolu, inceleyebilirsiniz. (<a href="https://getbootstrap.com/">https://getbootstrap.com/</a>)</li> <li><strong>Kendi Küçük Projelerini Yap:</strong> Mini portföyler, basit blog tasarımları, admin panelleri denemek çok öğretici olur.</li> <li><strong>Responsive Tasarımlar Üzerinde Çalış:</strong> Farklı ekran boyutlarına uyum sağlamak için grid ve flex yapılarını bol bol kullan. Bunları ne kadar çok kullanırsan aşinalığın o kadar artacak.</li> <li><strong>Bootstrap Temalarına Göz At:</strong> Ücretsiz tema sitelerinden ilham alabilirsin, kodlarını incele ve kendin tekrar kurmaya çalış. (Örneğin: <a href="https://startbootstrap.com/">https://startbootstrap.com/</a>)</li> <li><strong>Ekstra Bileşenleri Kullanmayı Öğren:</strong> Modals, Toasts, Offcanvas gibi daha ileri seviye bileşenleri projelerinde deneyerek Bootstrap bilgin kat kat artar.</li> </ul> <h2>Kapanış</h2> <p dir="auto">Bu bölümde Bootstrap’ın temel yapı taşlarını ve ilk bileşenlerini tanıdık.<br> Bir sonraki yazımda Foundation ile tanışmaya gideceğiz. Daha fazla framework tanımak için takipte kalın, hoşçakalın.</p> </body></html>