Bootstrap Öğrenme Rehberi: Kurulumdan Özelleştirmeye 50 Yazı

Bootstrap nasıl çalışır?

Bootstrap'i anlamanın en kısa yolu, sayfanıza eklediğiniz parçaları ve bu parçaların birbirine nasıl bağlandığını görmektir. Resmî başlangıç sayfası iki şey ister: sayfanın başına bir stil dosyası, sayfanın sonuna da isteğe bağlı bir JavaScript dosyası. Geri kalan her şey, HTML öğelerinize yazdığınız sınıf adları ve bazı bileşenlerde data-bs-* öznitelikleriyle olur.

Bir CSS dosyası ve isteğe bağlı bir JavaScript paketi

Stil tarafında tek bir bootstrap.min.css dosyası yerleşim (grid ve container), içerik (Reboot, tipografi, tablolar, görseller), bileşenler ve yardımcı sınıfların hepsini içerir. Belgeler bu bağlantının <head> içinde, diğer tüm stil dosyalarınızdan önce yer almasını ister; böylece kendi kurallarınız Bootstrap'in üzerine yazılabilir. Yalnızca grid ya da yalnızca yardımcı sınıflar gerekiyorsa daha küçük dosyalar da vardır.

JavaScript tarafı isteğe bağlıdır ama birçok bileşen onsuz çalışmaz: kapatılabilir uyarılar, açılır menüler, modal pencereler, carousel, collapse, toast, tooltip, popover ve scrollspy bunların başında gelir. Açılır menü, tooltip ve popover ayrıca konumlandırma için Popper kütüphanesine ihtiyaç duyar. bootstrap.bundle.min.js Popper'ı içinde taşır; ayrı dosya kullanırsanız Popper'ı Bootstrap'ten önce yüklemeniz gerekir. Bootstrap 5 jQuery'ye bağımlı değildir; eklentiler düz JavaScript ile yazılmıştır. JavaScript temelleri için JavaScript öğrenme rehberi yazısına bakabilirsiniz.

Mobile-first kırılma noktaları

Bootstrap önce en küçük ekran için gereken en az kuralı yazar, ekran genişledikçe min-width medya sorgularıyla yeni kurallar ekler. Altı kademe vardır: önek almayan xs (576px altı), sm (576px ve üstü), md (768px ve üstü), lg (992px ve üstü), xl (1200px ve üstü) ve xxl (1400px ve üstü). Bu yüzden col-md-6 gibi bir sınıf "md ve daha geniş ekranlarda yarım genişlik" anlamına gelir; daha dar ekranda sütun tam genişliğe döner. Aynı mantık d-md-none gibi görünürlük sınıflarında, container genişliklerinde ve navbar'ın açılma noktasında da geçerlidir.

Sınıflar ve data-bs-* öznitelikleri

Bileşenler bir temel sınıf ve onu değiştiren ek sınıflarla kurulur: btn ortak dolgu, kenarlık ve görüntü ayarlarını verir, btn-primary rengi ekler. Yardımcı sınıflar ise genellikle tek bir CSS özelliğini tek bir değere bağlar; d-block yalnızca display: block demektir. JavaScript gerektiren bileşenleri çoğu zaman tek satır kod yazmadan, HTML üzerindeki data-bs-toggle, data-bs-target ve data-bs-dismiss gibi özniteliklerle çalıştırırsınız. v4'teki data-toggle biçimi v5'te data-bs- önekine geçti; bu değişikliğin ayrıntısı geçiş yazısında.

Sass ile özelleştirme

Derlenmiş CSS'i olduğu gibi kullanabilirsiniz. Renkleri, boşluk ölçeğini, kırılma noktalarını ya da hangi bileşenlerin derleneceğini değiştirmek istediğinizde kaynak Sass dosyalarını kendi projenize alırsınız: değişkenler !default ile tanımlandığı için kendi değerinizi Bootstrap'i içe aktarmadan önce yazmanız yeterlidir. Seri bu işi son grupta, değişkenlerden Utilities API'ye kadar ele alıyor.

İlk sayfa: denetlenmiş başlangıç örneği

Aşağıdaki sayfa, resmî başlangıç şablonunu temel alır ve dört fikri bir arada gösterir: CDN üzerinden gelen CSS ve JavaScript paketi, içeriği ortalayan container, md kırılma noktasında yan yana geçen iki sütun ve tek satır JavaScript yazılmadan çalışan bir collapse düğmesi. Bağlantılardaki integrity değerleri Bootstrap deposundaki config.yml dosyasında 5.0.2 için verilen özetlerdir.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Merhaba Bootstrap</title>
  </head>
  <body>
    <main class="container py-4">
      <h1 class="display-5">Merhaba Bootstrap</h1>
      <p class="lead">Bu sayfa tek bir CSS dosyası ve bir JavaScript paketiyle çalışır.</p>
      <div class="row">
        <div class="col-md-6">
          <h2 class="h4">Sol sütun</h2>
          <p>Orta boy ekranda ve üstünde yanda, daha dar ekranda üstte durur.</p>
        </div>
        <div class="col-md-6">
          <h2 class="h4">Sağ sütun</h2>
          <p>Sütun sınıfı mobil öncelikli çalışır: kural md kırılma noktasından itibaren uygulanır.</p>
        </div>
      </div>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#detay" aria-expanded="false" aria-controls="detay">
        Ayrıntıları göster
      </button>
      <div class="collapse" id="detay">
        <div class="card card-body mt-3">
          Bu kutu, tek satır JavaScript yazmadan data-bs-* öznitelikleriyle açılıp kapanır.
        </div>
      </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

Düğmedeki data-bs-toggle="collapse" eklentiyi seçer, data-bs-target="#detay" hangi öğenin açılacağını söyler. aria-expanded ve aria-controls ise ekran okuyuculara düğmenin neyi kontrol ettiğini bildirir. Collapse öğesine doğrudan dolgu verilmemesi gerektiği için boşluk içteki karta konuldu. Dosyayı tarayıcıda açtığınızda, pencereyi daraltıp genişleterek iki sütunun 768px sınırında yer değiştirdiğini görebilirsiniz.

1. Temeller ve kurulum

Bootstrap'in ne olduğunu, sayfaya nasıl ekleneceğini ve sayfanın varsayılan görünümünü belirleyen temel kuralları bu grupta öğrenirsiniz.

• Bootstrap nedir, ne işe yarar?: Çerçevenin içeriğini, tasarım yaklaşımını, tarayıcı desteğini ve hangi bileşenlerin JavaScript istediğini anlatır.
• Bootstrap CDN kurulumu ve starter template: jsDelivr bağlantıları, SRI özetleri, bundle ile ayrı Popper farkı ve hangi CSS dosyasını seçeceğiniz.
• Bootstrap npm kurulumu, Webpack ve Parcel: Paket yöneticileriyle kurulum, Webpack ve Parcel ayarları ve Bootstrap'in kendi npm betikleri.
• Bootstrap Reboot ve tipografi sınıfları: Tarayıcı varsayılanlarını düzelten Reboot ile başlık, display, lead, liste ve alıntı sınıfları.

2. Grid ve yerleşim

Sayfa iskeleti bu gruptaki yazılarla kurulur: önce kırılma noktaları ve container, ardından satır ve sütunlar, en sonda flex ve konum yardımcıları.

• Bootstrap breakpoint değerleri: Altı kademeyi, mobile-first mantığını ve media-breakpoint-up/down/only/between mixin'lerini açıklar.
• Bootstrap container ve container-fluid: Sabit, akışkan ve kırılma noktasına bağlı container türleriyle max-width tablosunu gösterir.
• Bootstrap grid sistemi: row ve col: On iki sütunlu düzeni, otomatik genişliği, row-cols sınıflarını ve iç içe grid kurmayı öğretir.
• Bootstrap sütun hizalama, offset ve order: Sütunları dikey ve yatay hizalamayı, sıralamayı değiştirmeyi ve kaydırmayı anlatır.
• Bootstrap gutter sınıfları: g, gx, gy: Sütunlar arası boşluğu yatay ve dikey olarak ayarlamayı ve taşmayı önlemeyi gösterir.
• Bootstrap margin ve padding sınıfları: m ve p sınıflarının adlandırma kuralını, boşluk ölçeğini, mx-auto ve gap sınıflarını açıklar.
• Bootstrap display sınıfları ile gizleme ve gösterme: d-* sınıflarıyla öğeleri ekran boyutuna ya da yazdırmaya göre gizlemeyi öğretir.
• Bootstrap flex, justify-content ve align-items: Flex kapsayıcı kurmayı, yönü, hizalamayı, sarmayı ve büyüme/küçülme sınıflarını anlatır.
• Bootstrap position, fixed-top ve sticky-top: Konum yardımcılarını, kenar değerlerini, translate-middle ile ortalamayı ve z-index ölçeğini işler.

3. Yardımcı sınıflar: renk, kenar, boyut, metin

Özel CSS yazmadan görünümü ayarlamanın yolu yardımcı sınıflardır. Bu gruptaki yazılar en sık kullanılan sınıf ailelerini ve içerik öğelerini ele alır.

• Bootstrap renk sınıfları: text ve bg: Metin ve arka plan renk sınıflarını, bg-gradient'i ve renkli bağlantı yardımcılarını anlatır.
• Bootstrap border, rounded ve shadow: Kenarlık ekleme ve kaldırma, kenarlık rengi ve kalınlığı, köşe yuvarlama ve gölge sınıflarını gösterir.
• Bootstrap w-100, h-100 ve boyut sınıfları: Genişlik ve yükseklik sınıflarıyla overflow, float, vertical-align ve clearfix yardımcılarını açıklar.
• Bootstrap text sınıfları: Hizalama, kaydırma, büyük harf, yazı boyutu ve kalınlığı, satır yüksekliği ve metin kırpma sınıflarını öğretir.
• Bootstrap tablo sınıfları: Çizgili, üzerine gelince renklenen, kenarlıklı ve sıkı tabloları, renk varyantlarını ve duyarlı tabloları anlatır.
• Bootstrap img-fluid, figure ve ratio: Duyarlı görselleri, küçük resim stilini, figure kullanımını ve en boy oranlı gömmeleri gösterir.

4. Temel bileşenler

JavaScript'e az ya da hiç ihtiyaç duymayan, hemen her projede karşınıza çıkan bileşenler bu grupta.

• Bootstrap buton sınıfları ve button group: Renk ve çerçeve varyantlarını, boyutları, kapatma düğmesini ve düğme gruplarını anlatır.
• Bootstrap card bileşeni: Kart gövdesi, başlık, görsel, liste ve grid ile kart dizileri kurmayı, stretched-link'i öğretir.
• Bootstrap alert uyarı mesajları: Renkli uyarıları, uyarı içi bağlantıyı ve kapatılabilir uyarıyı JavaScript olaylarıyla birlikte gösterir.
• Bootstrap badge ve spinner: Rozetleri, düğme üstü sayaçları ve yükleniyor göstergelerini erişilebilir biçimde kullanmayı anlatır.
• Bootstrap progress bar: İlerleme çubuğunun genişliğini, etiketini, rengini, çizgili ve hareketli hâllerini ve ARIA değerlerini açıklar.
• Bootstrap list group: Liste öğelerini, etkin ve devre dışı durumları, yatay listeleri, renkleri ve sekme davranışını öğretir.

5. Gezinme ve açılır bileşenler

Menüler, sekmeler ve açılıp kapanan paneller sitenin gezinme katmanını oluşturur. Bu gruptaki bileşenlerin çoğu JavaScript ister.

• Bootstrap navbar menü yapımı: Duyarlı açılan menüyü, marka alanını, toggler düğmesini, renk şemalarını ve sabit yerleşimi anlatır.
• Bootstrap nav tabs ve pills: Nav, sekme ve hap görünümlü menüleri, eşit genişliği ve Tab eklentisiyle içerik değiştirmeyi gösterir.
• Bootstrap dropdown açılır menü: Bölünmüş düğmeleri, açılma yönlerini, menü hizalamasını ve Popper'a bağlı seçenekleri öğretir.
• Bootstrap pagination ve breadcrumb: Sayfa numaralarını, etkin ve devre dışı öğeleri ve ayırıcısı değiştirilebilen breadcrumb'ı anlatır.
• Bootstrap accordion ve collapse: Akordeon panellerini ve collapse eklentisinin tek ya da çoklu hedefle kullanımını açıklar.
• Bootstrap offcanvas yan menü: Ekran kenarından kayan paneli, arka plan ve kaydırma seçeneklerini ve olaylarını gösterir.

6. JavaScript bileşenleri ve API

Bu grup, kullanıcı etkileşimiyle açılan bileşenleri ve hepsinin ortak kullandığı JavaScript arayüzünü ele alır.

• Bootstrap modal pencere: Modal yapısını, sabit arka planı, kaydırılabilir ve ortalanmış modalları, boyutları ve olayları anlatır.
• Bootstrap carousel slider: Slaytları, kontrolleri, göstergeleri, açıklamaları, geçiş türünü ve zamanlama seçeneklerini öğretir.
• Bootstrap toast bildirimleri: Toast'ları JavaScript ile başlatmayı, otomatik gizlemeyi, yığmayı ve ekranda konumlandırmayı gösterir.
• Bootstrap tooltip ve popover: İsteğe bağlı başlatılan ipuçlarını, yönlerini, HTML içeriğini ve devre dışı öğelerle kullanımını anlatır.
• Bootstrap scrollspy: Sayfa kaydırıldıkça menüde etkin bağlantıyı güncelleyen eklentiyi ve ayarlarını açıklar.
• Bootstrap JavaScript API, data-bs ve olaylar: Veri öznitelikleri, programatik kullanım, seçenekler, olaylar ve modül olarak içe aktarma.

7. Formlar ve erişilebilirlik

Form denetimlerinin görünümü, düzeni ve doğrulaması bu grupta. Son yazı tüm seriyi erişilebilirlik açısından toparlar.

• Bootstrap form-control ve input stilleri: Etiketleri, metin kutularını, boyutları, salt okunur alanları, dosya ve renk girişlerini anlatır.
• Bootstrap checkbox, radio, switch ve select: Onay kutularını, radyo düğmelerini, anahtarları, açılır listeleri ve kaydırıcıları gösterir.
• Bootstrap input group ve floating label: Metin kutusuna ek, düğme ya da menü eklemeyi ve kayan etiketli alanları öğretir.
• Bootstrap form layout: Grid ile form düzenini, yatay formları, sütun boyutlarını ve satır içi formları anlatır.
• Bootstrap form validation: Tarayıcı doğrulamasını Bootstrap stilleriyle göstermeyi ve sunucu tarafı hata durumlarını işaretlemeyi açıklar.
• Bootstrap erişilebilirlik ve visually-hidden: Görsel olarak gizli metni, renk kontrastını, hareket azaltma tercihini ve bileşenlerdeki ARIA örneklerini toplar.

8. Özelleştirme, sürüm geçişi ve sık hatalar

Son grup, Bootstrap'i kendi markanıza uydurmayı, v4 projelerini taşımayı ve en sık karşılaşılan sorunları ele alır.

• Bootstrap Sass ile özelleştirme: Dosya yapısını, içe aktarma sırasını, değişken ezmeyi, map'leri ve yalnızca gereken parçaları derlemeyi anlatır.
• Bootstrap tema renkleri: $theme-colors map'ini, renk değişkenlerini ve renk varyantlarının nasıl üretildiğini gösterir.
• Bootstrap enable seçenekleri, CSS değişkenleri ve RFS: Gölge, geçiş ve negatif margin gibi genel anahtarları, --bs-* değişkenlerini ve RFS'yi açıklar.
• Bootstrap Utilities API ile özel sınıf: $utilities map'iyle yeni yardımcı sınıf üretmeyi, var olanları değiştirmeyi ve silmeyi öğretir.
• Bootstrap 4'ten 5'e geçiş: Resmî geçiş belgesine göre kaldırılan ve yeniden adlandırılan sınıfları ve JavaScript değişikliklerini listeler.
• Bootstrap çalışmıyor: sık hatalar: Eksik Popper, eski data-toggle yazımı, başlatılmayan tooltip ve row dışında col gibi sorunları çözer.

Bu seriyi nasıl okumalısınız?

Bootstrap'e yeni başlıyorsanız ilk iki grubu sırayla okuyun: kurulum, Reboot, kırılma noktaları, container ve grid birbirinin üstüne kurulur. Bir sayfa iskeleti çıkardıktan sonra yardımcı sınıflara geçin; çoğu görsel ayarı özel CSS yazmadan bu sınıflarla yapabildiğinizi göreceksiniz. Bileşen grupları birbirinden bağımsızdır, ihtiyaç duyduğunuz bileşene doğrudan atlayabilirsiniz. JavaScript gerektiren bir bileşenle çalışmadan önce JavaScript API yazısını okumanız, olayların ve seçeneklerin tüm eklentilerde aynı mantıkla çalıştığını görmenizi sağlar.

Her yazı kendi konusuna odaklanır ve ilgili kavramları tekrar anlatmak yerine kardeş yazılara bağlantı verir. Saf CSS konuları, örneğin flexbox, medya sorguları ya da özel değişkenler, CSS serisinde; form öznitelikleri ve ARIA ise HTML serisinde anlatılır. Böylece Bootstrap yazılarında sınıfların ne yaptığını, arkadaki CSS kavramını ise kendi yazısında okursunuz.

Sık Sorulan Sorular

Bootstrap öğrenmek için hangi ön bilgiler gerekir?

HTML öğelerini ve temel CSS kavramlarını, yani seçicileri, kutu modelini ve medya sorgularını bilmeniz yeterlidir. JavaScript bileşenlerini veri öznitelikleriyle kullanacaksanız JavaScript bilgisi zorunlu değildir; olaylara tepki vermek veya bileşenleri koddan açmak istediğinizde gerekir.

Seri hangi Bootstrap sürümünü anlatıyor?

Tüm yazılar Bootstrap 5.0 belgelerine ve v5.0.2 kaynak koduna göre yazıldı. Sonraki 5.x sürümlerinde eklenen özellikler bu seride yer almaz; onlar için kullandığınız sürümün resmî belgelerine bakmanız gerekir.

jQuery olmadan Bootstrap kullanılabilir mi?

Evet. Bootstrap 5 jQuery bağımlılığını kaldırdı ve eklentileri düz JavaScript ile yeniden yazdı. Sayfada jQuery varsa Bootstrap bileşenlerini jQuery eklentisi olarak da kaydeder, ancak bu zorunlu değildir.

Bootstrap'i özelleştirmek için Sass bilmek şart mı?

Derlenmiş CSS'i kullanıp kendi stil dosyanızla üzerine yazabilirsiniz. Renk, boşluk ölçeği veya kırılma noktası gibi temel değerleri tutarlı biçimde değiştirmek istiyorsanız Sass kaynak dosyalarıyla çalışmak daha temiz bir yoldur; bunun için temel Sass bilgisi yeterlidir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap nedir? · Bootstrap CDN kurulumu · CSS öğrenme rehberi · HTML öğrenme rehberi · JavaScript öğrenme rehberi