BOOTSTRAP 4 – LIST GROUP (BOOTSTRAP LİSTELER)

Fauda · 3 Tem 2021

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.