Bootstrap’ta Buttons (butonlar) bileşeni, kullanıcı etkileşimi sağlamak için kullanılan önemli ve görsel olarak çekici elementlerdir. Bootstrap, butonları özelleştirmenin ve farklı durumları belirtmenin birçok yolunu sunar. Aşağıda Bootstrap butonlarının özellikleri, türleri ve nasıl kullanılacağı hakkında bilgi bulunmaktadır.
1. Temel Yapı
Bootstrap butonları, aşağıdaki temel yapıya sahiptir:
<button type="button" class="btn btn-{type}"> {text} </button>
Burada {type} butonun stilini (örn. primary, secondary, success, danger, warning, info, light, dark) belirtir ve {text} buton üzerinde görünen metni içerir.
2. Buton Türleri
Bootstrap, aşağıdaki temel buton türlerini destekler:
-
btn-primary: Ana renk (genellikle mavi). -
btn-secondary: İkincil renk (gri). -
btn-success: Başarı durumu (yeşil). -
btn-danger: Hata durumu (kırmızı). -
btn-warning: Uyarı durumu (sarı). -
btn-info: Bilgi durumu (mavi). -
btn-light: Açık renk. -
btn-dark: Koyu renk. -
btn-link: Bağlantı gibi görünen buton (normal metin stilinde).
3. Temel Örnek
Aşağıda basit bir Bootstrap buton örneği bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buton Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Buton Örnekleri</h2>
<button type="button" class="btn btn-primary">Birinci Buton</button>
<button type="button" class="btn btn-secondary">İkinci Buton</button>
<button type="button" class="btn btn-success">Başarılı</button>
<button type="button" class="btn btn-danger">Hata</button>
<button type="button" class="btn btn-warning">Uyarı</button>
<button type="button" class="btn btn-info">Bilgi</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
4. Buton Boyutları
Bootstrap, butonların boyutunu değiştirmek için yardımcı sınıflar sunar. Aşağıdaki boyutlar mevcuttur:
-
btn-lg: Büyük buton. -
btn-sm: Küçük buton. -
btn-block: Tam genişlikte buton.
Ö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>
<button type="button" class="btn btn-success btn-block">Tam Genişlikte Buton</button>
5. Buton Grupları
Birden fazla butonu bir arada kullanmak için buton grubu oluşturabilirsiniz:
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Birinci</button>
<button type="button" class="btn btn-secondary">İkinci</button>
<button type="button" class="btn btn-secondary">Üçüncü</button>
</div>
6. Butonlar ve Linkler
Butonları, bağlantı gibi görünmesi için de kullanabilirsiniz:
<a href="#" class="btn btn-link">Bağlantı Butonu</a>
7. İkonlu Butonlar
Butonlara ikon eklemek için genellikle Font Awesome veya başka bir ikon kütüphanesi kullanabilirsiniz. Örnek:
<button type="button" class="btn btn-primary">
<i class="fas fa-plus">
</i> Ekle
</button>
8. Örnek: İkonlu Butonlar
Aşağıda, ikonlu butonların nasıl görüneceğine dair bir örnek verilmiştir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap İkonlu Buton Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="container mt-5">
<h2>İkonlu Butonlar</h2>
<button type="button" class="btn btn-success">
<i class="fas fa-check">
</i> Onayla
</button>
<button type="button" class="btn btn-danger">
<i class="fas fa-times">
</i> İptal
</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
9. Özet
Bootstrap buton bileşeni, kullanıcı etkileşimini artırmak ve belirli eylemleri gerçekleştirmek için etkili bir yoldur. Farklı stiller, boyutlar ve ikonlarla özelleştirilebilir. Kullanıcı deneyimini geliştirmek için butonları, içerik ile etkili bir şekilde entegre edebilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.