Bootstrap Bileşenler List Group 2
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.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Bileşenler List Group 2 dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!