Bootstrap list group class’larını kullanarak çok kısa sürede sade ve şık listeler oluşturabiliriz. Css kodu yazarak da istediğimiz listeleri oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim.
⇒ Bootstrap list group oluşturmak için yapmamız gerekenler:
- Normal Html’de olduğu gibi <ul> ve <li> etiketleri ile listemizi oluşturuyoruz.
- <ul> etiketinin class’ına list-group yazıyoruz.
- <li> etiketlerinin class’ına list-group-item yazıyoruz.
Şimdi en basit haliyle bir bootstrap list group oluşturalım.
Html kodları
|
1 2 3 4 5 6 7 |
<ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> |
Görünümü
⇒ <li> etiketlerinden istediğimiz birini aktif yani seçili hale getirmek için class’ına active yazıyoruz. Örneğin listenin ilk elemanının class’ına active yazalım.
Html kodları
|
1 2 3 4 5 6 7 |
<ul class="list-group"> <li class="list-group-item active">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> |
Görünümü
⇒ Liste elemanlarını bir link şeklinde oluşturmak istiyorsanız:
- <ul> etiketi yerine <div> etiketini,
- <li> etiketi yerine de <a> etiketini kullanmalısınız.
- <a> etiketinin class’ına list-group-item-action yazarsak, linklerin rengi gri olur. Yazmazsak varsayılan olarak linklerin rengi mavi olacaktır.
Listenin ilk elemanına list-group-item-action class’ını yazmayacağım. Diğer iki elemana ise yazacağım. Böylece aradaki farkı daha iyi görebiliriz.
Html kodları
|
1 2 3 4 5 6 7 |
<div class="list-group"> <a href="#" class="list-group-item">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a> </div> |
Görünümü
⇒ Listenin border yani kenarlıklarını kaldırmak isterseniz <ul> etiketinin class’ına list-group-flush yazabilirsiniz.
Html kodları
|
1 2 3 4 5 6 7 8 |
<ul class="list-group list-group-flush"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul> |
Görünümü
⇒ Bootstrap list group elemanlarının arkaplan renklerini değiştirebiliyoruz. Bunun için <li> etiketlerinin class’ına şu renk class’larını yazabiliriz.
- list-group-item-success
- list-group-item-info
- list-group-item-warning
- list-group-item-danger
- list-group-item-primary
- list-group-item-secondary
- list-group-item-light
- list-group-item-dark
Örnek üzerinde görelim.
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul> |
Görünümü
⇒ Bootstrap list group elemanlarını Bootstrap badge’lerle birlikte kullanabiliyoruz.
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Yorumlar <span class="badge badge-primary badge-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Mesajlar <span class="badge badge-primary badge-pill">50</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Bildirimler <span class="badge badge-primary badge-pill">99</span> </li> </ul> |
Görünümü
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}