Bootstrap butonlar, projelerinize görsel olarak çekici, duyarlı ve işlevsel düğmeler eklemenizi sağlar. Farklı renkler, boyutlar ve stillerle özelleştirilebilen bu butonlar, kullanıcı etkileşimlerini artırmak için ideal bir bileşendir.
Temel Kullanım
Bootstrap butonlar, button, a, veya input etiketlerine .btn sınıfı eklenerek oluşturulur. Ek olarak, belirli renk ve stiller için btn-primary, btn-success, vb. sınıflar eklenir.
Örnek:
<button type="button" class="btn btn-primary">Birincil Buton</button>
<button type="button" class="btn btn-secondary">İkincil Buton</button>
<a href="#" class="btn btn-success">Başarı Butonu</a>
Buton Türleri
| Sınıf | Amacı |
|---|---|
.btn-primary | Önemli bir eylemi vurgulamak için kullanılır. |
.btn-secondary | Daha az önemli eylemler için. |
.btn-success | Başarılı bir işlemi temsil eder. |
.btn-danger | Uyarı veya hata mesajları için. |
.btn-warning | Kullanıcıyı uyarmak için. |
.btn-info | Bilgi içeren butonlar için. |
.btn-light | Hafif bir tasarım sağlar. |
.btn-dark | Koyu bir tasarım sağlar. |
.btn-link | Düğmeyi bir bağlantı görünümünde gösterir. |
Buton Boyutları
Bootstrap butonlarının boyutları, .btn-lg veya .btn-sm sınıflarıyla değiştirilebilir.
Örnek:
<button type="button" class="btn btn-primary btn-lg">Büyük Buton</button>
<button type="button" class="btn btn-secondary btn-sm">Küçük Buton</button>
Standart boyut için herhangi bir ekstra sınıf gerekmez.
Butonların Devre Dışı Bırakılması (Disabled State)
Butonları devre dışı bırakmak için disabled özelliği kullanılabilir veya .disabled sınıfı eklenebilir.
Örnek:
<button type="button" class="btn btn-primary" disabled>Devre Dışı</button>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">Bağlantı Butonu</a>
Buton Grupları
Bootstrap ile birden fazla buton bir araya getirilebilir. Bunun için .btn-group sınıfı kullanılır.
Örnek:
<div class="btn-group" role="group" aria-label="Temel Buton Grubu">
<button type="button" class="btn btn-primary">Sol</button>
<button type="button" class="btn btn-secondary">Orta</button>
<button type="button" class="btn btn-success">Sağ</button>
</div>
Blok Butonlar
Tam genişlikte butonlar oluşturmak için .d-grid veya .btn-block sınıfları kullanılabilir.
Örnek:
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Tam Genişlikte Buton</button>
<button class="btn btn-secondary" type="button">Tam Genişlikte Buton</button>
</div>
Buton Renk Örnekleri
<button class="btn btn-primary">Birincil</button>
<button class="btn btn-secondary">İkincil</button>
<button class="btn btn-success">Başarı</button>
<button class="btn btn-danger">Hata</button>
<button class="btn btn-warning">Uyarı</button>
<button class="btn btn-info">Bilgi</button>
<button class="btn btn-light">Hafif</button>
<button class="btn btn-dark">Koyu</button>
Butonlara İkon Ekleme
Bootstrap butonlarına ikonlar eklemek için Font Awesome veya Bootstrap ikon seti kullanılabilir.
Örnek:
<button type="button" class="btn btn-primary">
<i class="bi bi-star-fill"></i> Favoriler
</button>
Waybe mükemmel