Bootstrap CSS Eğitimi

Bootstrap Nedir?

Bootstrap, web siteleri için en popüler CSS framework'üdür. Responsive ve mobile-first tasarımlar oluşturmanızı sağlar.

Avantajları:

Hızlı: Hazır bileşenler
Responsive: Tüm cihazlarda uyumlu
Özelleştirilebilir: Kendi tasarımınızı uygulayın

1. Renkler

Arka Plan Renkleri (bg-*)

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

Metin Renkleri (text-*)

text-primary

text-success

text-danger

text-muted

<div class="bg-primary text-white">Primary</div>

2. Tipografi

Başlıklar

h1 Başlık (2.5rem)

h2 Başlık (2rem)

h3 Başlık (1.75rem)

Display Başlıkları

Display 1

Display 4

Metin Stilleri

Lead paragraf

Kalın, İtalik, Vurgulu

Büyük harf

her kelime büyük

Hizalama

Sola

Ortaya

Sağa

Font Boyutları

fs-1 (en büyük)

fs-3

fs-6 (en küçük)

<p class="lead text-center">Metin</p>

3. Spacing

Margin ve Padding

Syntax: {property}{sides}-{size}

property: m (margin), p (padding)
sides: t, b, s, e, x, y, boş
size: 0-5, auto

Örnekler

m-3 (tüm yönler 16px)

mt-4 (top 24px)

mx-5 (horizontal 48px)

p-3 (padding 16px)

<div class="m-3 p-4">Margin 3, Padding 4</div>

4. Grid System

12 Sütunlu Grid

Breakpoints:

xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px

Temel Grid

col

col-4

col-8

Responsive Grid

12/6/4

<div class="row"> <div class="col-md-6">Sütun</div> </div>

5. Flexbox

Justify Content

start

center

end

between

Align Items

align-items-center

6. Butonlar

Buton Stilleri

Outline

Boyutlar

İkonlu

<button class="btn btn-primary">Buton</button>

7. Utilities

Display

d-block

d-flex

Border & Shadow

border

border-primary border-3

rounded

shadow

Width

w-25

w-50

w-100

Position

top-start

top-end

bottom-start

8. Diğer Konular

Kartlar

Kart Başlığı

Kart içeriği

Detay

Formlar

Tablolar

Başlık 1	Başlık 2
Veri 1	Veri 2

Alerts

Başarılı!

Hata!

Badges

Primary Success

Şimdi Uygulama Yap!