Bootstrap List Group bileşeninin ikinci örneği olarak, daha fazla özelleştirme ve etkileşim ekleyerek, liste öğelerine simgeler, eylem düğmeleri ve bağlantılar dahil eden gelişmiş bir liste oluşturalım. Bu örnekte, kullanıcıların etkileşimde bulunabileceği daha zengin bir kullanıcı arayüzü oluşturacağız.
Gelişmiş Bootstrap List Group Özellikleri
- Eylem Düğmeleri: Her bir liste öğesine eylem düğmeleri ekleyerek kullanıcıların belirli işlemleri gerçekleştirmesini sağlayabilirsiniz.
- Simgeler: Liste öğelerinde simgeler kullanarak daha fazla bilgi verebilir ve görsel bir çekicilik oluşturabilirsiniz.
- Bağlantılar: Liste öğelerini bağlantı haline getirerek kullanıcıların sayfalar arasında geçiş yapmasını kolaylaştırabilirsiniz.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak daha zengin bir list group örneği verilmiştir. Bu örnekte, liste öğeleri simgeler ve eylem düğmeleri içermektedir.
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>Gelişmiş Bootstrap List Group Örneği</title>
</head>
<body>
<div class="container mt-5">
<h2>Gelişmiş Bootstrap List Group Örneği</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>
<i class="bi bi-file-earmark-text">
</i> Belge 1
</span>
<div>
<button class="btn btn-sm btn-primary">Görüntüle</button>
<button class="btn btn-sm btn-danger">Sil</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>
<i class="bi bi-file-earmark-text">
</i> Belge 2
</span>
<div>
<button class="btn btn-sm btn-primary">Görüntüle</button>
<button class="btn btn-sm btn-danger">Sil</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>
<i class="bi bi-file-earmark-text">
</i> Belge 3
</span>
<div>
<button class="btn btn-sm btn-primary">Görüntüle</button>
<button class="btn btn-sm btn-danger">Sil</button>
</div>
</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>
<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</body>
</html>
Açıklama
-
<ul class="list-group">: List Group bileşenini başlatır.list-groupsınıfı, öğeleri gruplamak için kullanılır. -
<li class="list-group-item d-flex justify-content-between align-items-center">: Her bir liste öğesi için d-flex sınıfı kullanılarak öğelerin yatay olarak hizalanması sağlanır.justify-content-betweensınıfı, simge ve düğmeleri yan yana yerleştirir. -
Simgeler:
<i class="bi bi-file-earmark-text"></i>kullanılarak liste öğelerine simgeler eklenir. Bu simgeler, Bootstrap Icons kütüphanesinden alınmıştır. - Eylem Düğmeleri: Her bir öğenin sağında, "Görüntüle" ve "Sil" gibi eylem düğmeleri bulunmaktadır. Bu düğmeler, kullanıcıların belirli işlemleri gerçekleştirmesini sağlar.
Önemli Notlar
- Liste öğelerine etkileşim eklemek için JavaScript kullanarak düğmelere işlevsellik ekleyebilirsiniz.
- Bootstrap Icons kütüphanesini kullanarak simgeleri özelleştirebilirsiniz. Yukarıdaki örnekte, Bootstrap Icons CDN'den simgeler kullanılmıştır.
Gelişmiş Bootstrap List Group bileşeni, kullanıcıların içerik ile etkileşimde bulunmalarını kolaylaştırırken, aynı zamanda daha fazla bilgi sunan bir arayüz oluşturur. Bu tür bileşenler, web uygulamanızın kullanıcı deneyimini artırır ve daha profesyonel bir görünüm sağlar.