İçeriğe geç
Codary
Bootstrap 5 Modül 1: Bootstrap 5 Giriş ve Izgara (Grid) Sistemi

1.1 Bootstrap 5 Nedir, CDN İle Dahil Etme ve Container

Kolay
Ders 1 / 27 %0 Ders listesi
1.1 Bootstrap 5 Nedir, CDN İle Dahil Etme ve Container 1.2 Grid Mimarisi: Satır (row) ve Sütun (col) Mantığı 1.3 Esnek Sütun Boyutlandırma ve Otomatik Genişlik 1.4 Sütun Kaydırma (Offset) ve Boşluklar (Gutter) 1.5 Grid Dikey ve Yatay Hizalama Sınıfları 1.6 Hatayı Bul: Sütunlar Alt Alta Düşüyor 2.1 Renk Sınıfları ve Arka Planlar (Text & BG) 2.2 Tipografi, Başlıklar ve Display Sınıfları 2.3 Boşluk (Spacing) Sınıfları (m-3, p-4, mb-5) 2.4 Kenarlıklar (Borders) ve Köşe Yuvarlatma (Rounded) 2.5 Gölgeler (Shadows) ve Flex Utility Sınıfları 3.1 Butonlar ve Buton Grupları (Btn & Btn-Outline) 3.2 Rozetler (Badges) ve Uyarı Kutuları (Alerts) 3.3 Kartlar (Cards: Header, Body, Footer Yapısı) 3.4 Gezinme Çubuğu (Navbar: Logo ve Responsive Menü) 3.5 Listeler, Gruplar ve İlerleme Çubukları (Progress) 3.6 Hatayı Bul: Buton ve Uyarı Görünmüyor 4.1 Açılır Pencere Modallar (Modal Structure) 4.2 Akordiyonlar (Accordion: SSS Bölümleri) 4.3 Açılır Menüler (Dropdowns) ve Sekmeler (Nav Tabs) 4.4 Kaydırıcı Slider (Carousel: Fotoğraf Galerisi) 4.5 Bildirim Kutuları (Toasts) ve İpucu Araçları 5.1 Proje 1: Responsive Landing Page (Karşılama Sayfası) 5.2 Proje 2: Modern E-Ticaret Ürün Kataloğu 5.3 Proje 3: İnteraktif Müşteri Kayıt Formu Sayfası 5.4 Proje 4: Yönetim Paneli (Admin Dashboard) İskeleti 5.5 Proje 5: Şık SaaS Fiyatlandırma ve SSS Akordiyonu
Misafir olarak çalışıyorsun. İlerlemeni kaydetmek ve sonraki dersleri açmak için giriş yap. Giriş yap / Kayıt ol

Bootstrap Nedir?

CSS kursunda bir butonu güzel göstermek için renk, iç boşluk, kenarlık, köşe yuvarlaklığı, hover rengi ve geçiş efekti yazdık; neredeyse 10 satır. Bootstrap ile aynı butonu tek satırda yaparsın:
Örnek KodHTML
<button class="btn btn-primary">Kaydol</button>
Çünkü Bootstrap'in yazarları bu 10 satırı önceden yazıp btn ve btn-primary adlı class'lara koymuştur. Sen sadece class'ı verirsin.

Bootstrap'i sayfaya eklemek (CDN)

Kendi projende Bootstrap'i kullanmak için dosyaları indirmen bile gerekmez. CDN (içerik dağıtım ağı) üzerinden iki satırla eklenir:
Örnek KodHTML
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
    ...
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
  1. link: Bootstrap'in CSS dosyası. Tüm görünüm buradan gelir.
  2. script: Bootstrap'in JavaScript dosyası. Açılır menü, modal, akordiyon gibi hareketli bileşenler için gereklidir. Sayfanın en sonuna konur.
  3. viewport meta etiketi: Bootstrap'in telefonlarda doğru çalışması için şarttır.
Bu sitedeki editörde bu satırları yazmana gerek yok; Bootstrap önizlemeye otomatik olarak eklenir. Sen doğrudan body içeriğini yazacaksın.

Container: içeriğin kabı

Bootstrap'te sayfa içeriği genellikle bir container içine yazılır.
Örnek KodHTML
<div class="container">
    İçerik
</div>
  • container: İçeriği yatayda ortalar ve ekran boyutuna göre maksimum bir genişlik verir. Geniş ekranlarda içerik ortada okunabilir bir sütunda durur, kenarlarda boşluk kalır.
  • container-fluid: Her zaman ekranın tüm genişliğini kaplar. Tam genişlikteki üst şeritler ve arka planlar için kullanılır.

Birden çok class

Bir elemana boşlukla ayırarak istediğin kadar class verebilirsin: class="container bg-dark text-white p-3". Bootstrap'te bu çok yaygındır; her class tek bir işi yapar.

  • bg-light / bg-dark: Açık veya koyu arka plan.
  • text-white: Beyaz yazı.
  • p-3: İç boşluk (spacing dersinde ayrıntılı göreceğiz).
Görev Kendin yazarak öğren
İki farklı container oluştur.

  1. container class'ı olan bir div oluştur, içine Bootstrap'e Hoş Geldin yazan bir h1 koy. Bu kutuya bg-light arka planı ver.
  2. Altına container-fluid class'ı olan bir div ekle. Bu kutuya bg-dark ve text-white sınıflarını ver.
  3. İki kutunun genişlik farkını önizlemede gözlemle.

    Bilgi Kontrol Quizi

    İçeriği ortalayan ve ekran boyutuna göre sabit bir maksimum genişlik veren Bootstrap sınıfı hangisidir?

    index.html

    Parantez ve tırnaklar kendiliğinden kapanır. Tab girinti ekler; editörden çıkmak için önce Esc, sonra Tab.

    Çıktı Konsolu: Hazır 
    Çıktı görmek için "Kodu Çalıştır" butonuna basın...