Bootstrap’ta Button Group (buton grubu) bileşeni, bir arada kullanılacak birden fazla butonu düzenlemek için kullanılır. Bu, kullanıcıların benzer işlevleri bir arada bulmalarını kolaylaştırır ve tasarım açısından daha düzenli bir görünüm sağlar. Button Group, butonları yatay veya dikey olarak düzenlemenize olanak tanır.
1. Temel Yapı
Bootstrap buton grubu oluşturmak için, butonlarınızı bir div içerisine yerleştirmeniz ve bu dive btn-group sınıfını eklemeniz yeterlidir. İşte temel yapı:
<div class="btn-group" role="group" aria-label="Button group">
<button type="button" class="btn btn-primary">Buton 1</button>
<button type="button" class="btn btn-primary">Buton 2</button>
<button type="button" class="btn btn-primary">Buton 3</button>
</div>
2. Button Group Türleri
Buton gruplarını farklı türlerde oluşturabilirsiniz. İşte birkaç örnek:
- Yatay Buton Grubu: Varsayılan olarak, buton grubu yatay olarak düzenlenir.
-
Dikey Buton Grubu: Butonların dikey olarak düzenlenmesini sağlamak için
btn-group-verticalsınıfını kullanabilirsiniz.
3. Örnek: Yatay Buton Grubu
Aşağıda basit bir yatay buton grubu ö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 Yatay Buton Grubu Ö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>Yatay Buton Grubu</h2>
<div class="btn-group" role="group" aria-label="Button group">
<button type="button" class="btn btn-primary">Buton 1</button>
<button type="button" class="btn btn-primary">Buton 2</button>
<button type="button" class="btn btn-primary">Buton 3</button>
</div>
</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. Örnek: Dikey Buton Grubu
Dikey bir buton grubu oluşturmak için btn-group-vertical sınıfını kullanabilirsiniz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dikey Buton Grubu Ö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>Dikey Buton Grubu</h2>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Buton 1</button>
<button type="button" class="btn btn-secondary">Buton 2</button>
<button type="button" class="btn btn-secondary">Buton 3</button>
</div>
</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>
5. Button Group ile Buton İkonları
Buton gruplarına ikon eklemek için Font Awesome veya başka bir ikon kütüphanesi kullanabilirsiniz. Örnek:
<div class="btn-group" role="group" aria-label="Button group with icons">
<button type="button" class="btn btn-primary">
<i class="fas fa-plus">
</i> Ekle
</button>
<button type="button" class="btn btn-primary">
<i class="fas fa-edit">
</i> Düzenle
</button>
<button type="button" class="btn btn-primary">
<i class="fas fa-trash">
</i> Sil
</button>
</div>
6. Buton Gruplarının Özelleştirilmesi
Buton gruplarını, CSS ile özelleştirerek farklı görünümler elde edebilirsiniz. Arka plan renklerini, kenar boşluklarını veya diğer stilleri değiştirmek için özel stiller ekleyebilirsiniz.
7. Örnek: Buton Grupları ve İkonlar
Aşağıda, buton grubu ve ikonların bir arada kullanıldığı 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 Grubu Ö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 Buton Grubu</h2>
<div class="btn-group" role="group" aria-label="Button group with icons">
<button type="button" class="btn btn-success">
<i class="fas fa-plus">
</i> Ekle
</button>
<button type="button" class="btn btn-warning">
<i class="fas fa-edit">
</i> Düzenle
</button>
<button type="button" class="btn btn-danger">
<i class="fas fa-trash">
</i> Sil
</button>
</div>
</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>
8. Özet
Bootstrap buton grubu, birden fazla butonu düzenlemek için etkili bir yoldur ve kullanıcı etkileşimini kolaylaştırır. Yatay veya dikey düzenleme seçenekleri, butonları ikonlarla birleştirme imkanı ve farklı stillerle özelleştirme yeteneği ile kullanıcı deneyimini artırır. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.