Bootstrap 5 List Group: Liste Grubu, Numaralı ve Yatay Liste, Tab ile Kullanım

Temel yapı ve CSS

Liste grubu <ul>, <ol> ya da <div> üzerinde çalışır. Kaynak kodda .list-group bir flex kapsayıcıdır (flex-direction: column), listenin varsayılan sol dolgusunu ve alt boşluğunu sıfırlar. Öğeler blok düzeyinde olduğu için madde işaretleri görünmez. Bootstrap 5.0.2 derlenmiş CSS dosyasında öğe sınıfı şöyle tanımlıdır:

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

Her öğenin kendi kenarlığı vardır; ardışık öğelerde çift çizgi oluşmasın diye kaynak kod ikinci ve sonraki öğelerin üst kenarlığını sıfırlar (.list-group-item + .list-group-item). İlk öğe üst köşelerin, son öğe alt köşelerin yuvarlaklığını kapsayıcıdan devralır. Bu ayrıntılar, listeye kendi CSS'inizle kenarlık eklerken neden bazı çizgilerin görünmediğini açıklar. Kaynakta iki katman ayarı daha vardır: üzerine gelinen ya da odaklanan action öğesi z-index: 1, etkin öğe ise z-index: 2 alır. Etkin öğe ayrıca bir piksel yukarı kaydırılıp (margin-top: -1px) üst kenarlığını geri kazanır; böylece renkli kenarlık komşu öğenin gri çizgisinin altında kalmaz ve seçili öğe dört kenarıyla birlikte net görünür.

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Genel bakış</li>
  <li class="list-group-item">Faturalar</li>
  <li class="list-group-item">Destek talepleri</li>
  <li class="list-group-item disabled" aria-disabled="true">Raporlar (yakında)</li>
</ul>

.active seçili öğeyi tema rengiyle doldurur; belgelerdeki örnekler bunu aria-current="true" ile birlikte kullanır, böylece seçim ekran okuyuculara da aktarılır. .disabled ise öğeyi gri gösterir ve kaynakta pointer-events: none uygular. Belgelere göre bu sınıf öğeyi yalnızca devre dışı gibi gösterir; bağlantı gibi bazı öğelerin tıklama olaylarını tamamen kapatmak için ek JavaScript gerekebilir. Pasif öğeye aria-disabled="true" eklemeyi unutmayın.

Bağlantı ve buton öğeleri: list-group-item-action

Tıklanabilir bir liste için öğeleri <a> ya da <button> yapar ve onlara .list-group-item-action eklersiniz. Bu sınıf üzerine gelme, odak ve basılı durumlarına zemin rengi değişimi verir. Bootstrap bu stilleri bilerek ayrı bir sınıfa koyar: <li> ya da <div> gibi etkileşimsiz öğelerden oluşan bir liste, tıklanabilirmiş izlenimi vermemelidir. Belgelerin açık uyarısı şudur: burada standart .btn sınıflarını kullanmayın.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Hesap bilgileri</a>
  <a href="#" class="list-group-item list-group-item-action">Güvenlik</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Faturalar</a>
</div>

<div class="list-group mt-3">
  <button type="button" class="list-group-item list-group-item-action">Yeni klasör</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Taşı</button>
</div>

Butonlarda .disabled sınıfı yerine yerel disabled özniteliğini kullanabilirsiniz; kaynakta :disabled durumu da aynı gri stile bağlıdır. <a> öğeleri bu özniteliği desteklemediği için pasif bir bağlantıya .disabled, tabindex="-1" ve aria-disabled="true" birlikte verilir. Kaynak kod ayrıca .list-group-item-action için width: 100% ve text-align: inherit tanımlar; bu, butonların da bağlantılar gibi tam genişlikte ve sola hizalı görünmesini sağlar.

Flush, numaralı ve yatay varyantlar

.list-group-flush dış kenarlıkları ve köşe yuvarlaklıklarını kaldırarak öğeleri kapsayıcının kenarından kenarına yayar. En çok bir kartın içinde kullanılır; kartla birleşimi Bootstrap card yazısında gösteriliyor.

.list-group-numbered sınıfı (isteğe bağlı olarak bir <ol> ile) öğelere numara ekler. Numaralar tarayıcının varsayılan liste numarası değil, CSS sayaçlarıyla üretilir: kapsayıcıda counter-reset, her <li> öğesinin ::before sözde öğesinde counter-increment ve content kullanılır. Derlenmiş CSS'teki içerik counters(section, ".") ". " biçimindedir. Belgelere göre bu yöntem numaranın öğe içinde daha iyi yerleşmesini ve kolay özelleştirilmesini sağlar. Geçiş belgesi bu sınıfı v5 yeniliği olarak listeler.

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Alan adını seçin</li>
  <li class="list-group-item">Paketi belirleyin</li>
  <li class="list-group-item">Ödemeyi tamamlayın</li>
</ol>

Öğeleri yan yana dizmek için .list-group-horizontal kullanılır; bu sınıf tüm ekran genişliklerinde yataydır. Belirli bir kırılma noktasından itibaren yatay olmasını istiyorsanız duyarlı varyantı seçin: .list-group-horizontal-sm, -md, -lg, -xl ya da -xxl. Örneğin .list-group-horizontal-md dar ekranda dikey, md ve üstünde yatay görünür. Yatay öğelerin eşit genişlikte olması için belgeler her öğeye .flex-fill eklemeyi önerir. Önemli bir sınırlama: belgelere göre yatay liste grupları şimdilik flush varyantıyla birleştirilemez. Kırılma noktası mantığı Bootstrap breakpoint yazısında.

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-fill">Aylık</li>
  <li class="list-group-item flex-fill">Üç aylık</li>
  <li class="list-group-item flex-fill">Yıllık</li>
</ul>

Renk sınıfları

Öğelere durum rengi vermek için .list-group-item-{renk} sınıfları vardır: primary, secondary, success, danger, warning, info, light ve dark. Bu sınıflar Sass'taki list-group-item-variant() mixin'i ile $theme-colors haritasından üretilir; zemin tema renginin yüzde 80 açılmış tonu ($list-group-item-bg-scale), metin de yüzde 40 koyulaştırılmış tonudur ($list-group-item-color-scale). Kontrast yetersiz kalırsa metin rengi yeniden hesaplanır. Renk sınıfı .list-group-item-action ile birlikte kullanıldığında üzerine gelme stili de eklenir ve .active durumunda öğe beyaz metinli, koyu tonlu bir zemine geçer.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Yedekleme tamamlandı</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">SSL sertifikası 10 gün içinde yenilenmeli</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Disk kotası doldu</a>
</div>

Rengin tek başına anlam taşımaması kuralı burada da geçerlidir: örnekteki öğelerin her biri durumu metinle de söyler. Renkler, tema haritasındaki değişikliklerden otomatik etkilenir; ayrıntılar tema renkleri yazısında.

Badge ve özel içerik

Liste öğesine sayaç eklemek için içine bir badge koyar ve öğeyi flex kapsayıcı yaparsınız: d-flex justify-content-between align-items-center metni sola, badge'i sağa iter ve dikeyde ortalar. Daha zengin içerik için öğenin içine başlık, paragraf ve küçük yazı koyabilirsiniz; belgelerdeki örnek bağlantılı öğelerde bile <h5>, <p> ve <small> kullanır. Badge seçenekleri badge ve spinner, flex yardımcıları Bootstrap flex yazısında.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Sunucu bakımı</h5>
      <small class="text-muted">3 gün önce</small>
    </div>
    <p class="mb-1">Planlı bakım cumartesi gecesi yapılacak.</p>
    <small class="text-muted">Durum sayfasında ayrıntılar var.</small>
  </a>
</div>

<ul class="list-group mt-3">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Gelen kutusu
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Taslaklar
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
</ul>

Onay kutulu ve radyolu listeler

Bootstrap onay kutuları ve radyo düğmeleri liste öğelerine yerleştirilebilir. İki yol vardır. Birincisinde girdi bir <li> içindedir ve görünür bir etiketi yoktur; belgeler bu durumda girdiye mutlaka aria-label eklemenizi ister. İkincisinde liste öğesinin kendisi bir <label> olur; böylece öğenin tamamı tıklanabilir bir hedef hâline gelir ve metin girdinin etiketi olur.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="eposta">
    E-posta bildirimleri
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="sms">
    SMS bildirimleri
  </label>
</div>

.form-check-input sınıfının ayrıntıları checkbox, radio ve switch yazısında. me-1 girdiyle metin arasına küçük bir boşluk koyar.

Tab eklentisiyle sekmeli içerik

Liste grubu, Bootstrap'in Tab JavaScript eklentisiyle birleşince sekme menüsü gibi çalışır: soldaki listeden bir öğe seçildiğinde sağdaki ilgili içerik bölmesi görünür. Eklentiyi tek başına ya da derlenmiş bootstrap.js dosyasıyla yükleyebilirsiniz. JavaScript yazmadan çalıştırmak için öğelere data-bs-toggle="list" verilir ve her öğenin href değeri hedef bölmenin id değerini gösterir. Bölmeler bir .tab-content içinde .tab-pane sınıfıyla durur; ilk bölme .active alır.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="ayar-liste" role="tablist">
      <a class="list-group-item list-group-item-action active" id="ayar-profil-liste" data-bs-toggle="list" href="#ayar-profil" role="tab" aria-controls="ayar-profil">Profil</a>
      <a class="list-group-item list-group-item-action" id="ayar-guvenlik-liste" data-bs-toggle="list" href="#ayar-guvenlik" role="tab" aria-controls="ayar-guvenlik">Güvenlik</a>
      <a class="list-group-item list-group-item-action" id="ayar-bildirim-liste" data-bs-toggle="list" href="#ayar-bildirim" role="tab" aria-controls="ayar-bildirim">Bildirimler</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="ayar-profil" role="tabpanel" aria-labelledby="ayar-profil-liste">Ad, e-posta ve dil ayarları.</div>
      <div class="tab-pane fade" id="ayar-guvenlik" role="tabpanel" aria-labelledby="ayar-guvenlik-liste">Parola ve iki adımlı doğrulama.</div>
      <div class="tab-pane fade" id="ayar-bildirim" role="tabpanel" aria-labelledby="ayar-bildirim-liste">Bildirim tercihleri.</div>
    </div>
  </div>
</div>

Bölmelerin solarak açılması için her .tab-pane öğesine .fade eklenir; belgelere göre ilk bölme görünür başlaması için ayrıca .show almalıdır. Öznitelikler sekme kalıbını izler: liste role="tablist", öğeler role="tab" ve aria-controls, bölmeler role="tabpanel" ve aria-labelledby taşır. v5.0.2 kaynak kodunda Tab eklentisi data-bs-toggle değeri tab, pill ya da list olan öğeleri dinler; yani aynı eklenti nav sekmeleri için de kullanılır. Nav tarafı nav tabs ve pills yazısında.

Uygulamalı mini örnek: sepet özeti

Resmî Checkout şablonu, sepet özetini badge ve flex yardımcılarıyla zenginleştirilmiş bir liste grubu olarak kurar. Aşağıdaki kısaltılmış sürümde başlığın yanında ürün sayısı, her satırda ürün adı ile kısa açıklama solda, tutar sağda durur. İndirim satırı bg-light zemin ve text-success metinle ayrışır; son satır toplamı kalın yazar.

<h4 class="d-flex justify-content-between align-items-center mb-3">
  <span class="text-primary">Sepetiniz</span>
  <span class="badge bg-primary rounded-pill">2</span>
</h4>
<ul class="list-group mb-3">
  <li class="list-group-item d-flex justify-content-between lh-sm">
    <div>
      <h6 class="my-0">Web hosting</h6>
      <small class="text-muted">12 aylık paket</small>
    </div>
    <span class="text-muted">Tutar 1</span>
  </li>
  <li class="list-group-item d-flex justify-content-between lh-sm">
    <div>
      <h6 class="my-0">Alan adı</h6>
      <small class="text-muted">1 yıllık kayıt</small>
    </div>
    <span class="text-muted">Tutar 2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between bg-light">
    <div class="text-success">
      <h6 class="my-0">İndirim kodu</h6>
      <small>ORNEKKOD</small>
    </div>
    <span class="text-success">İndirim</span>
  </li>
  <li class="list-group-item d-flex justify-content-between">
    <span>Toplam</span>
    <strong>Genel toplam</strong>
  </li>
</ul>

Örnekteki tutarlar yer tutucudur. lh-sm başlık ile açıklama arasındaki satır yüksekliğini daraltır, my-0 de başlığın varsayılan dış boşluklarını kaldırır. Öğeler tıklanabilir olmadığı için burada .list-group-item-action kullanılmaz; bu, bölümün başında anlatılan ayrımın pratik bir uygulamasıdır.

Tab JavaScript API: yöntemler ve olaylar

Programla kontrol için her öğe için ayrı bir bootstrap.Tab örneği oluşturulur. Belgelenmiş yöntemler şunlardır: show öğeyi seçer ve bölmesini gösterir; önceki seçili öğe seçimden çıkar ve bölmesi gizlenir. dispose örneği yok eder. Statik getInstance öğeye bağlı örneği, getOrCreateInstance ise örnek yoksa yenisini oluşturarak döndürür.

var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)

tab.show()

Yeni bir öğe seçildiğinde olaylar belgelere göre şu sırayla tetiklenir: önce şu an etkin olan öğede hide.bs.tab, sonra gösterilecek öğede show.bs.tab, ardından önceki öğede hidden.bs.tab ve en son yeni öğede shown.bs.tab. Daha önce etkin bir öğe yoksa hide.bs.tab ve hidden.bs.tab hiç tetiklenmez. Olay nesnesinde event.target ve event.relatedTarget yeni ve önceki öğeyi verir.

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function (tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // yeni etkin öğe
    event.relatedTarget // önceki etkin öğe
  })
})

Belgelerdeki olay örneğinde forEach çağrısının kapanış parantezi eksiktir; burada tamamlanmış hâliyle gösteriyoruz. Dinleyicinin içinde bu iki özelliğe erişip istediğiniz işi yaparsınız. Olay sisteminin genel kuralları Bootstrap JavaScript API, dilin kendisi JavaScript öğrenme rehberi yazısında.

Sass değişkenleri

Değişkenleri ezme yöntemi Sass ile özelleştirme yazısında.

Sık yapılan hatalar

• Action öğelerinde .btn kullanmak: Belgeler açıkça yasaklar; .list-group-item-action yeterlidir.
• Etkileşimsiz öğeye action sınıfı vermek: <li> öğesine eklenen action sınıfı tıklanabilir izlenimi verir ama hiçbir şey yapmaz.
• Yatay ve flush sınıflarını birleştirmek: Belgelere göre şimdilik desteklenmez.
• Pasif bağlantıyı yalnızca .disabled ile bırakmak: Klavye ile hâlâ açılabilir; tabindex="-1" ve aria-disabled="true" ekleyin.
• Sekme listesinde v4 özniteliği: data-toggle="list" 5.0'da çalışmaz; data-bs-toggle="list" yazın.
• Fade kullanıp ilk bölmeye show eklememek: İlk içerik görünmez kalır.
• href ile id'yi eşleştirmemek: Tab eklentisi hedef bölmeyi bulamaz.

Sık Sorulan Sorular

List group ile normal ul arasındaki fark nedir?

Normal bir liste madde işaretli ve kenarsızdır. List group her öğeye kenarlık, dolgu ve durum stilleri verir; seçili, pasif, tıklanabilir ve renkli öğeleri hazır sınıflarla kurmanızı sağlar.

List group'u menü olarak kullanabilir miyim?

Evet, <a> öğeleri ve .list-group-item-action ile kenar menüsü kurabilirsiniz. Sayfa içi bölme değiştirmek istiyorsanız Tab eklentisini, siteler arası gezinme için ise navbar ya da nav bileşenini düşünün.

Numaralı liste grubu için ol etiketi şart mı?

Hayır. Belgeler <ol> kullanımını isteğe bağlı sayar, çünkü numaraları tarayıcı değil CSS sayacı üretir. Yine de içerik gerçekten sıralı adımlardan oluşuyorsa <ol> anlamsal olarak daha doğru bir seçimdir.

Liste öğesi tıklanınca neden mavi oluyor?

Muhtemelen öğede .active sınıfı vardır ya da Tab eklentisi öğeyi etkin yapmıştır. Tıklama sırasındaki kısa gri ton ise .list-group-item-action sınıfının basılı (:active) stilidir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Card bileşeni · Badge ve spinner · Nav tabs ve pills · JavaScript API · JavaScript öğrenme rehberi