in English

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.

Bu sayfada

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
A second item
A third item
A fourth item
And a fifth one

<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
A second item
A third item
A fourth item
And a fifth one

<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

s ile sınıf yerine özniteliğ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>

Sayılı

Numaralandırılmış liste grubu öğelerini seçmek için değiştirici sınıfı ekleyin .list-group-numbered(ve isteğe bağlı olarak bir öğe kullanın ). Liste grubu öğelerinin içine daha iyi yerleştirmek ve daha iyi özelleştirmeye izin vermek için <ol>sayılar (varsayılan tarayıcı stilinin aksine) CSS aracılığıyla oluşturulur .<ol>

Sayılar counter-reseton ile oluşturulur <ol>ve daha sonra stillendirilir ve with ve üzerine bir sözde öğe ::beforeile yerleştirilir .<li>counter-incrementcontent

cras justo odio
cras justo odio
cras justo odio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Bunlar, özel içerikle de harika çalışır.

alt başlık
cras justo odio
14
alt başlık
cras justo odio
14
alt başlık
cras justo odio
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

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

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>
<ul class="list-group list-group-horizontal-xxl">
  <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 .visually-hiddensı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 bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-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 paragrafta bazı yer tutucu içerik.

Ve küçük bir baskı.

Liste grubu öğesi başlığı

3 gün önce

Bir paragrafta bazı yer tutucu içerik.

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

Liste grubu öğesi başlığı

3 gün önce

Bir paragrafta 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" aria-current="true">
    <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>

Onay kutuları ve radyolar

Bootstrap'in onay kutularını ve radyolarını liste grubu öğelerine yerleştirin ve gerektiği gibi özelleştirin. Bunları <label>s olmadan kullanabilirsiniz, ancak lütfen aria-labelerişilebilirlik için bir nitelik ve değer eklemeyi unutmayın.

İlk onay kutusu
İkinci onay kutusu
Üçüncü onay kutusu
Dördüncü onay kutusu
Beşinci onay kutusu

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Ve büyük isabet alanları için <label>s .list-group-itemistiyorsanız, bunu da yapabilirsiniz.

İlk onay kutusu İkinci onay kutusu Üçüncü onay kutusu Dördüncü onay kutusu Beşinci onay kutusu

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

küstah

Değişkenler

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

karışımlar

s için bağlamsal değişken sınıflarını$theme-colors oluşturmak için ile birlikte kullanılır ..list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Döngü

Mixin ile değiştirici sınıfları oluşturan döngü list-group-item-variant().

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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

constructor

Bir liste öğesi öğesini ve içerik kapsayıcısını etkinleştirir. Sekme, DOM'da bir kapsayıcı düğümünü hedefleyen data-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

göstermek

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.

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

  tab.show()

elden çıkarmak

Bir öğenin sekmesini yok eder.

getInstance

Bir DOM öğesiyle ilişkili sekme örneğini almanızı sağlayan statik yöntem

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Bir DOM öğesiyle ilişkili sekme örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza izin veren statik yöntem

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Olaylar

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

hide.bs.tab(geçerli etkin 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
`show.bs.tab`	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`
`shown.bs.tab`	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`
`hidden.bs.tab`	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`

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}