Bootstrap List Group bileşeni, içeriği liste halinde düzenlemek için kullanılan şık ve düzenli bir yapıdır. Bu bileşen, sıralı veya sırasız listeler oluşturmanızı ve her bir liste öğesine bağlantılar, simgeler veya eylem düğmeleri eklemenizi sağlar. List Group, genellikle yan menüler, bilgi panelleri veya içerik grupları gibi durumlarda kullanılır.
Bootstrap List Group Özellikleri
- Temiz ve Düzenli Görünüm: List Group, öğelerinizi şık bir şekilde düzenlemenize olanak tanır.
- Seçilebilir Öğeler: Kullanıcıların belirli bir liste öğesine tıklayarak etkileşimde bulunmasına imkan tanır.
- Özelleştirme: Liste öğelerine ikonlar, resimler veya eylem düğmeleri ekleyerek görünümünü özelleştirebilirsiniz.
Kullanım Örneği
Aşağıda, Bootstrap List Group bileşenini kullanan basit bir örnek verilmiştir. Bu örnekte, birkaç öğeden oluşan bir liste oluşturulmuştur.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap List Group Örneği</title>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap List Group Örneği</h2>
<ul class="list-group">
<li class="list-group-item active" aria-current="true">Aktif Öğesi</li>
<li class="list-group-item">Öğe 1</li>
<li class="list-group-item">Öğe 2</li>
<li class="list-group-item">Öğe 3</li>
<li class="list-group-item">Öğe 4</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Açıklama
-
<ul class="list-group">: List Group bileşenini başlatır.list-groupsınıfı, öğelerinizi gruplamak için kullanılır. -
<li class="list-group-item active" aria-current="true">: Liste öğesinin başlangıcıdır.activesınıfı, bu öğenin şu anda seçili olduğunu belirtir. -
Diğer Liste Öğeleri: Diğer
list-group-itemsınıfına sahip öğeler, normal liste öğelerini temsil eder.
Önemli Notlar
- Bootstrap List Group bileşeni, kullanıcıların belirli öğelerle etkileşimde bulunmasını sağlar. Bunun için öğelere bağlantılar ekleyebilir veya belirli işlevler gerçekleştirebilirsiniz.
- Liste öğelerini CSS ile özelleştirerek görünümünü değiştirebilirsiniz.
Bootstrap List Group, kullanıcıların içeriklerinizi daha iyi anlamasını sağlarken, şık ve düzenli bir yapı sunar. Web uygulamalarında sıkça kullanılır ve kullanıcı deneyimini iyileştirir.