Bootstrap List Group

Bootstrap 4 List Group component' i ile profesyonel liste görünümlerini oluşturabiliriz.

Bootstrap 4 List Group component 'ini ister html liste etiketlerine istersek de her hangi bir html etikete uygulayıp bir liste görünümü alabiliriz.

Kapsayıcı elemana (ul) bir .list-group sınıfını vermeliyiz ve her bir eleman ise .list-group-item sınıfına sahip olmalıdır.

<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>

Örnek 1 için tıklayınız.

Aynı örneği div etiketi ile de yapabiliriz.

<div class="list-group">
    <div class="list-group-item">First item</div>
    <div class="list-group-item">Second item</div>
    <div class="list-group-item">Third item</div>
</div>

Örnek 2 için tıklayınız.

Liste içinde her hangi bir elemanı öne çıkarmak istersek .active sınıfını kullanabiliriz.

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Örnek 3 için tıklayınız.

Eğer ki liste elemanlarını bir link şeklinde oluşturmak istersek bu durumda <ul> etiketi yerine <div> ve <li> etiketi yerine de <a> etiketini kullanmalıyız.

** list-group-item-action sınıfını eklersek gri bir zemin rengine sahip oluruz aksi halde link için mavi bir renk olur.

 <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">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>

Örnek 4 için tıklayınız.

Pasif bir link oluşturma için disabled sınıfını ekleyebiliriz.

 <div class="list-group">
    <a href="#" class="list-group-item disabled">Disabled item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item disabled">Disabled item</a>
 </div>

Örnek 5 için tıklayınız.

Liste elemanlarının etrafındaki kenarlıkları (border) silmek için .list-group-flush sınıfını kullanabiliriz.

<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>
</ul>

Örnek 6 için tıklayınız.

.list-group-flush sınıfı genelde bootstrap card' ları ile birlikte kullanılıyor.

<div class="card">
  
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title</p>
    </div>
    
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    
    <div class="card-body">
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>

Örnek 7 için tıklayınız.

Her bir liste elemanının arka zemin rengini bootstrap color dersinde öğrendiğimiz temel renkleri uygulayabiliriz. Bootstrap List Group elemanları için kullanabileceğimiz renk sınıfları aşağıdaki gibidir.

.list-group-item-success

.list-group-item-secondary

.list-group-item-info

.list-group-item-warning

.list-group-item-danger

.list-group-item-primary

.list-group-item-dark

.list-group-item-light

<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>

Örnek 8 için tıklayınız.