Bootstrap Bileşenler List Group 1
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.
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 1 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!