Gezinmeler ve sekmeler

Bootstrap'in içerdiği gezinme bileşenlerinin nasıl kullanılacağına ilişkin belgeler ve örnekler.

Bu sayfada

Temel gezinme

.navBootstrap'te kullanılabilen gezinme, temel sınıftan etkin ve devre dışı durumlarına kadar genel işaretlemeyi ve stilleri paylaşır . Her stil arasında geçiş yapmak için değiştirici sınıfları değiştirin.

Temel .navbileşen flexbox ile oluşturulmuştur ve her tür navigasyon bileşeni oluşturmak için güçlü bir temel sağlar. Bazı stil geçersiz kılmaları (listelerle çalışmak için), daha geniş isabet alanları için bazı bağlantı dolguları ve temel devre dışı bırakılmış stiller içerir.

Temel .navbileşen herhangi bir durum içermez .active. Aşağıdaki örnekler, özellikle bu belirli sınıfın herhangi bir özel stili tetiklemediğini göstermek için sınıfı içerir.

Etkin durumu yardımcı teknolojilere aktarmak için, geçerli sayfanın veya bir kümedeki geçerli öğenin değerini aria-currentkullanarak özniteliği kullanın.pagetrue

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sınıflar baştan sona kullanılır, bu nedenle işaretlemeniz süper esnek olabilir. Öğelerinizin sırası önemliyse <ul>yukarıdaki gibi s kullanın veya bir öğeyle kendinizinkini yuvarlayın. Kullanımları nedeniyle, gezinme bağlantıları, gezinme öğeleriyle aynı şekilde davranır, ancak fazladan işaretleme olmadan.<ol><nav>.navdisplay: flex

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Mevcut stiller

.navDeğiştiriciler ve yardımcı programlar ile s bileşeninin stilini değiştirin. Gerektiği gibi karıştırın ve eşleştirin veya kendinizinkini oluşturun.

Yatay hizalama

flexbox yardımcı programları ile navigasyonunuzun yatay hizalamasını değiştirin . Varsayılan olarak, gezinmeler sola hizalıdır, ancak bunları kolayca merkeze veya sağa hizalı olarak değiştirebilirsiniz.

Şununla ortalanmış .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Şununla sağa hizalanmış .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Dikey

.flex-columnYardımcı programla esnek öğe yönünü değiştirerek navigasyonunuzu istifleyin . Bunları bazı görünüm pencerelerinde istiflemeniz gerekiyor, ancak diğerlerinde değil mi? Duyarlı sürümleri kullanın (örneğin, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Her zaman olduğu gibi, s olmadan da dikey gezinme mümkündür <ul>.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Sekmeler

Temel gezinmeyi yukarıdan alır ve .nav-tabssekmeli bir arayüz oluşturmak için sınıfı ekler. Sekme JavaScript eklentimizle sekmeli bölgeler oluşturmak için bunları kullanın .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

haplar

Aynı HTML'yi alın, ancak .nav-pillsbunun yerine kullanın:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Doldur ve gerekçelendir

.navİçeriğinizi, iki değiştirici sınıftan birini mevcut tam genişliği genişletmeye zorlayın . Kullanılabilir tüm alanı s ile orantılı olarak doldurmak için .nav-item, öğesini kullanın .nav-fill. Tüm yatay alanın dolu olduğuna, ancak her gezinme öğesinin aynı genişliğe sahip olmadığına dikkat edin.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Tabanlı gezinme kullanırken , yalnızca stil öğeleri için gerekli olduğundan <nav>güvenle atlayabilirsiniz ..nav-item.nav-link<a>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Eşit genişlikte elemanlar için kullanın .nav-justified. Tüm yatay alan gezinme bağlantıları tarafından doldurulacaktır, ancak .nav-fillyukarıdakilerden farklı olarak her gezinme öğesi aynı genişlikte olacaktır.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Tabanlı gezinme .nav-fillkullanan örneğe benzer .<nav>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Esnek yardımcı programlarla çalışma

Duyarlı gezinme varyasyonlarına ihtiyacınız varsa, bir dizi esnek kutu yardımcı programı kullanmayı düşünün . Daha ayrıntılı olsa da, bu yardımcı programlar duyarlı kesme noktalarında daha fazla özelleştirme sunar. Aşağıdaki örnekte, navigasyonumuz en düşük kesme noktasında istiflenecek, ardından küçük kesme noktasından başlayarak mevcut genişliği dolduran yatay bir düzene uyarlanacaktır.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Erişilebilirlikle ilgili

Gezinti çubuğu sağlamak için navs kullanıyorsanız, role="navigation"öğesinin en mantıklı üst kapsayıcısına bir a eklediğinizden veya tüm gezinmenin etrafına <ul>bir öğe sardığınızdan emin olun. <nav>Rolü <ul>kendisine eklemeyin, çünkü bu, yardımcı teknolojiler tarafından gerçek bir liste olarak duyurulmasını engeller.

.nav-tabsGezinme çubuklarına, görsel olarak sınıfla birlikte sekmeler olarak biçimlendirilmiş olsa bile , veya nitelikleri verilmemesi gerektiğini unutmayın . Bunlar, WAI ARIA Yazma Uygulamalarında açıklandığı gibi yalnızca dinamik sekmeli arabirimler için uygundur . Örnek için bu bölümdeki dinamik sekmeli arayüzler için JavaScript davranışına bakın . JavaScript'imiz seçili durumu etkin sekmeye ekleyerek işlediğinden, dinamik sekmeli arayüzlerde bu nitelik gerekli değildir .role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Açılır menüleri kullanma

Biraz fazladan HTML ve açılır JavaScript eklentisi içeren açılır menüler ekleyin .

Açılan sekmeler

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Açılan haplar

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

küstah

Değişkenler

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript davranışı

bootstrap.jsGezinme sekmelerimizi ve haplarımızı yerel içeriğin sekmeli bölmelerini oluşturmak üzere genişletmek için JavaScript eklentisini tek tek veya derlenmiş dosya aracılığıyla ekleyin.

WAI ARIA Yazma Uygulamalarında açıklandığı gibi dinamik sekmeli arayüzler, yapılarını, işlevlerini ve mevcut durumlarını yardımcı teknolojilerin (ekran okuyucular gibi) kullanıcılarına iletmek için role="tablist", role="tab", role="tabpanel"ve ek öznitelikler gerektirir . aria-En iyi uygulama olarak, sekmeler için öğeleri kullanmanızı öneririz <button>, çünkü bunlar yeni bir sayfaya veya konuma giden bağlantılar yerine dinamik bir değişikliği tetikleyen kontrollerdir.

Hem kullanılabilirlik hem de erişilebilirlik sorunlarına neden olduğundan, dinamik sekmeli arabirimlerin açılır menüler içermemesi gerektiğini unutmayın . Kullanılabilirlik açısından, şu anda görüntülenen sekmenin tetikleyici öğesinin hemen görünmemesi (kapalı açılır menünün içinde olduğu için) kafa karışıklığına neden olabilir. Erişilebilirlik açısından, bu tür bir yapıyı standart bir WAI ARIA modeliyle eşleştirmenin şu anda mantıklı bir yolu yoktur, bu da yardımcı teknolojilerin kullanıcıları için kolayca anlaşılır hale getirilemeyeceği anlamına gelir.

Bu, Ana Sayfa sekmesinin ilişkili içeriği olan bazı yer tutucu içeriktir. Başka bir sekmeye tıklamak, bir sonraki için bunun görünürlüğünü değiştirir. JavaScript sekmesi, içerik görünürlüğünü ve stilini kontrol etmek için sınıfları değiştirir. Sekmeler, haplar ve diğer herhangi bir .navgüçlü gezinme ile kullanabilirsiniz.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

İhtiyaçlarınızı karşılamaya yardımcı olmak için bu <ul>, yukarıda gösterildiği gibi temelli işaretlemeyle veya herhangi bir keyfi "kendi yuvarlayın" işaretlemesiyle çalışır. kullanıyorsanız , öğenin gezinme işareti olarak yerel rolünü geçersiz kılacağından, doğrudan ona <nav>eklememeniz gerektiğini unutmayın . role="tablist"Bunun yerine, alternatif bir öğeye geçin (aşağıdaki örnekte basit bir <div>) ve etrafına sarın <nav>.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Sekmeler eklentisi ayrıca haplarla da çalışır.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Ve dikey haplarla.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Veri özniteliklerini kullanma

Bir öğeyi basitçe belirterek data-bs-toggle="tab"veya üzerinde JavaScript yazmadan bir sekmeyi veya hap navigasyonunu etkinleştirebilirsiniz . data-bs-toggle="pill"Bu veri özniteliklerini .nav-tabsveya üzerinde kullanın .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

JavaScript aracılığıyla

JavaScript aracılığıyla sekmeli sekmeleri etkinleştirin (her sekmenin 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 sekmeleri 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

Sekmeleri soldurmak .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" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</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 .

constructor

Bir sekme öğesini ve içerik kapsayıcısını etkinleştirir. Sekme, bir data-bs-targetveya bir bağlantı kullanılıyorsa href, DOM'deki bir kapsayıcı düğümünü hedefleyen bir özniteliğe sahip olmalıdır.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

göstermek

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.tabolay meydana gelmeden önce) arayana geri döner.

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  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.taband 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 tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})