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

html

<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

html

<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

html

<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

html

<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 özniteliği <button>de kullanabilirsiniz . Ne yazık ki, s devre dışı özniteliği desteklemiyor.disabled.disabled<a>

html

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

html

<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

Bir liste öğesi
Bir liste öğesi
Bir liste öğesi

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

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

alt başlık
Liste öğesi içeriği
14
alt başlık
Liste öğesi içeriği
14
alt başlık
Liste öğesi içeriği
14

html

<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>
      Content for list item
    </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>
      Content for list item
    </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>
      Content for list item
    </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

html

<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

html

<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

html

<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

html

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

html

<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

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

İlk radyo
ikinci radyo
Üçüncü radyo

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Tüm liste grubu öğesini tıklanabilir yapmak için .stretched-linkon s öğesini kullanabilirsiniz .<label>

İlk onay kutusu
İkinci onay kutusu
Üçüncü onay kutusu

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, liste grupları artık .list-groupgelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sas değişkenleri

$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):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

Daha fazla bilgi için JavaScript belgelerimize bakın .

İçeriğinizi bir sekme öğesi olarak etkinleştirir.

Yapıcı ile bir sekme örneği oluşturabilirsiniz, örneğin:

const bsTab = new bootstrap.Tab('#myTab')

Yöntem	Tanım
`dispose`	Bir öğenin sekmesini yok eder.
`getInstance`	Bir DOM öğesiyle ilişkili sekme örneğini almanızı sağlayan statik yöntem, bunu şu şekilde kullanabilirsiniz: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Bir DOM öğesiyle ilişkilendirilmiş bir sekme örneği döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Verilen sekmeyi seçer ve ilişkili bölmesini gösterir. Daha önce seçilen diğer sekmelerin seçimi kaldırılır ve ilişkili bölmesi gizlenir. Sekme bölmesi gerçekte gösterilmeden önce (yani `shown.bs.tab`olay meydana gelmeden önce) arayana geri döner.

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.taband hidden.bs.tabolayları tetiklenmez.

Etkinlik tipi	Tanım
`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`
`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`

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