Liste grubu

Liste grupları, bir dizi içeriği görüntülemek için esnek ve güçlü bir bileşendir. Bunları, içindeki hemen hemen her içeriği destekleyecek şekilde değiştirin ve genişletin.

Temel örnek

En temel liste grubu, liste öğelerini ve uygun sınıfları içeren sırasız bir listedir. Takip eden seçeneklerle veya gerektiğinde kendi CSS'nizle bunun üzerine inşa edin.

Bir öğe
ikinci bir öğe
Üçüncü bir öğe
Dördüncü bir öğe
Ve beşinci bir

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Aktif öğeler

Geçerli etkin seçimi belirtmek için a'ya .activeekleyin ..list-group-item

Etkin bir öğe
ikinci bir öğe
Üçüncü bir öğe
Dördüncü bir öğe
Ve beşinci bir

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Devre dışı bırakılan öğeler

Devre dışı görünmesi için .disableda'ya ekleyin . Bazı öğelerin , tıklama olaylarını (ör. bağlantılar) tamamen devre dışı bırakmak için özel JavaScript gerektireceğini unutmayın..list-group-item.disabled

Devre dışı bırakılmış bir öğe
ikinci bir öğe
Üçüncü bir öğe
Dördüncü bir öğe
Ve beşinci bir

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Bağlantılar ve düğmeler

Ekleyerek üzerine gelindiğinde, devre dışı bırakıldığında ve etkin durumlarla eyleme geçirilebilir liste grubu öğeleri oluşturmak için <a>s veya s kullanın . Etkileşimli olmayan öğelerden ( s veya s gibi) oluşan liste gruplarının tıklama veya dokunma uygunluğu sağlamadığından emin olmak için bu sözde sınıfları ayırırız.<button>.list-group-item-action<li><div>

Burada standart sınıfları kullanmadığınızdan.btn emin olun .

Geçerli bağlantı öğesi İkinci bir bağlantı öğesi Üçüncü bir bağlantı öğesi Dördüncü bir bağlantı öğesi Devre dışı bırakılmış bir bağlantı öğesi

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

s ile sınıf yerine niteliği <button>de kullanabilirsiniz . Ne yazık ki, s devre dışı özniteliği desteklemiyor.disabled.disabled<a>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

floş

.list-group-flushListe grubu öğelerini bir üst kapsayıcıda (örneğin kartlar) uçtan uca işlemek için bazı kenarlıkları ve yuvarlatılmış köşeleri kaldırmak için ekleyin .

Bir öğe
ikinci bir öğe
Üçüncü bir öğe
Dördüncü bir öğe
Ve beşinci bir

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Yatay

.list-group-horizontalTüm kesme noktalarında liste grubu öğelerinin düzenini dikeyden yataya değiştirmek için ekleyin . .list-group-horizontal-{sm|md|lg|xl}Alternatif olarak, o kesme noktasından başlayarak bir liste grubunu yatay hale getirmek için duyarlı bir değişken seçin min-width. Şu anda yatay liste grupları, gömme liste gruplarıyla birleştirilemez.

Uzman İpucu: Yatay olduğunda eşit genişlikte liste grubu öğeleri mi istiyorsunuz? Her liste grubu öğesine ekleyin .flex-fill.

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

Bir öğe
ikinci bir öğe
Üçüncü bir öğe

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

bağlamsal sınıflar

Durum bilgisi olan bir arka plan ve renkle liste öğelerine stil vermek için bağlamsal sınıfları kullanın.

Basit bir varsayılan liste grubu öğesi
Basit bir birincil liste grubu öğesi
Basit bir ikincil liste grubu öğesi
Basit bir başarı listesi grubu öğesi
Basit bir tehlike listesi grubu öğesi
Basit bir uyarı listesi grubu öğesi
Basit bir bilgi listesi grubu öğesi
Basit bir hafif liste grubu öğesi
Basit bir karanlık liste grubu öğesi

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Bağlamsal sınıflar ayrıca .list-group-item-action. Önceki örnekte bulunmayan vurgulu stillerin eklenmesine dikkat edin. Ayrıca desteklenen .activedevlettir; bağlamsal bir liste grubu öğesinde etkin bir seçimi belirtmek için uygulayın.

Basit bir varsayılan liste grubu öğesi Basit bir birincil liste grubu öğesi Basit bir ikincil liste grubu öğesi Basit bir başarı listesi grubu öğesi Basit bir tehlike listesi grubu öğesi Basit bir uyarı listesi grubu öğesi Basit bir bilgi listesi grubu öğesi Basit bir hafif liste grubu öğesi Basit bir karanlık liste grubu öğesi

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

rozetleri ile

Bazı yardımcı programların yardımıyla okunmamış sayıları, etkinlikleri ve daha fazlasını göstermek için herhangi bir liste grubu öğesine rozetler ekleyin .

Bir liste öğesi14
İkinci bir liste öğesi2
Üçüncü bir liste öğesi1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Özel içerik

Flexbox yardımcı programlarının yardımıyla, aşağıdaki gibi bağlantılı liste grupları için bile hemen hemen her HTML'yi ekleyin .

Liste grubu öğesi başlığı

3 gün önce

Bir paragraftaki bazı yer tutucu içerik.

Ve küçük bir baskı.

Liste grubu öğesi başlığı

3 gün önce

Bir paragraftaki bazı yer tutucu içerik.

Ve bazı sessiz küçük baskı.

Liste grubu öğesi başlığı

3 gün önce

Bir paragraftaki bazı yer tutucu içerik.

Ve bazı sessiz küçük baskı.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

JavaScript davranışı

bootstrap.jsListe grubumuzu yerel içeriğin sekmeli bölmelerini oluşturacak şekilde genişletmek için JavaScript eklentisi sekmesini kullanın (tek tek veya derlenmiş dosya aracılığıyla ekleyin).

Ev Profil Mesajlar Ayarlar

Bir paragrafta "Ev" ile ilgili bazı yer tutucu içerik. Ve burada sadece bu sekme panelini doldurmak ve doldurmak için kullanılan biraz daha içerik. Üretimde, açıkçası burada daha gerçek içeriğe sahip olacaksınız. Ve sadece metin değil. Her şey olabilir, gerçekten. Metin, resimler, formlar.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Veri özniteliklerini kullanma

data-toggle="list"Bir öğeyi basitçe belirterek veya üzerinde herhangi bir JavaScript yazmadan bir liste grubu gezinmesini etkinleştirebilirsiniz . Bu veri özniteliklerini üzerinde kullanın .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

JavaScript aracılığıyla

JavaScript aracılığıyla sekmeli liste öğesini etkinleştirin (her liste öğesinin ayrı ayrı etkinleştirilmesi gerekir):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Tek tek liste öğesini birkaç şekilde etkinleştirebilirsiniz:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

solma efekti

Sekmeler panelinin kararmasını sağlamak .fadeiçin her birine ekleyin .tab-pane. İlk sekme bölmesinin de .showilk içeriği görünür hale getirmesi gerekir.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

yöntemler

$().sekme

Bir liste öğesi öğesini ve içerik kapsayıcısını etkinleştirir. Sekme, DOM'da bir kapsayıcı düğümünü hedefleyen data-targetveya bir kapsayıcı düğümüne sahip olmalıdır.href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('göster')

Verilen liste öğesini seçer ve ilişkili bölmesini gösterir. Daha önce seçilen diğer liste öğelerinin seçimi kaldırılır ve ilişkili bölmesi gizlenir. Sekme bölmesi gerçekte gösterilmeden önce (örneğin, shown.bs.tabolay meydana gelmeden önce) arayana döner.

$('#someListItem').tab('show')

Olaylar

Yeni bir sekme gösterilirken olaylar aşağıdaki sırayla tetiklenir:

hide.bs.tab(geçerli aktif sekmede)
show.bs.tab(gösterilecekler sekmesinde)
hidden.bs.tab(önceki etkin sekmede, hide.bs.tabetkinlikle aynı)
shown.bs.tab(yeni etkin olan az önce gösterilen sekmede, show.bs.tabetkinlikle aynı)

Hiçbir sekme zaten etkin değilse hide.bs.tabve hidden.bs.tabolayları tetiklenmez.

Etkinlik tipi	Tanım
göster.bs.sekmesi	Bu olay, sekme gösterisinde, ancak yeni sekme gösterilmeden önce tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi (varsa) hedeflemek için `event.target`ve düğmelerini kullanın .`event.relatedTarget`
gösterilen.bs.sekmesi	Bu olay, bir sekme gösterildikten sonra sekme gösterisinde tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi (varsa) hedeflemek için `event.target`ve düğmelerini kullanın .`event.relatedTarget`
hide.bs.tab	Bu olay, yeni bir sekme gösterileceğinde (ve dolayısıyla önceki etkin sekme gizleneceğinde) tetiklenir. Sırasıyla, mevcut etkin sekmeyi ve yakında etkin olacak yeni sekmeyi hedeflemek için `event.target`ve kullanın .`event.relatedTarget`
gizli.bs.sekmesi	Bu olay, yeni bir sekme gösterildikten sonra tetiklenir (ve bu nedenle önceki etkin sekme gizlenir). Sırasıyla önceki etkin sekmeyi ve yeni etkin sekmeyi hedeflemek için `event.target`ve kullanın .`event.relatedTarget`

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})