Bootstrap 4 Liste Grupları (Lıst Groups)

Bootstrap 4 Liste Grupları (List Groups)

Bootstrap 4'te liste elemanlarını bir grup halinde gösterebilmek için yapılması gereken 2 işlem vardır.
1. kapsayan ul elemanına .list-group,
2. içteki li elemanlarına .list-group-item,
class özellikleri verilmesi gerekir.
Örnek:<ul class="list-group"> <li class="list-group-item">İlk Eleman</li> <li class="list-group-item">İkinci Eleman</li> <li class="list-group-item">Son Eleman</li> </ul>

Liste Grupları Aktif ve Engelli(Active / Disabled)

Liste gruplarında liste elemanı nesnesini aktif yapabilmek için li elemanına .active class değeri eklenmelidir.
Liste elemanı seçilmesini engellemek(disabled) için ise li elemanına .disable class değeri eklenmelidir.

Renki Liste Grupları

Bootstrap4'te liste elemanları hazır renkler ile renklendirilebilir. Bunun için li elemanına .list-group-item-* class değerleri eklenmelidir.
Not:* işaretli bölüme renk adı gelecektir.
Örnek: <ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> </ul>

Buton ve Linkleri Kullanarak Liste Grubu Oluşturmak

Liste grupları şeklinde bir görünüm oluştururken buton ve linkler de kullanılabilir.
Bu yapıyı oluşturmak için dışta olan div elemanına .list-group class özellii verilir.
İçte bulunan a veya button elemanlarına ise .list-group-item-action class değerleri verilir.
Eğer buton ve linklerin renkli olması istenirse .list-group-item-* class değeri verilmelidir.
Not:* işaretli yerlere hazır renk isimleri gelecektir.
Örnek: <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">.list-group-item-action</a> <a href="#" class="list-group-item list-group-item-success">.list-group-item-success</a> <a href="#" class="list-group-item list-group-item-danger">Secondary item</a> </div>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com