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

html

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

html

<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">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:

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">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).

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

haplar

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

html

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

html

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">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, ARIA Yazma Uygulamaları Kılavuzu sekmeleri modelinde 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

html

<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">Disabled</a>
  </li>
</ul>

Açılan haplar

html

<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">Disabled</a>
  </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, navigasyonlar artık gelişmiş gerçek zamanlı özelleştirme için .nav, .nav-tabsve üzerinde yerel CSS değişkenlerini kullanıyor. .nav-pillsCSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

.navTemel sınıfta :

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Değiştirici .nav-tabssınıfında:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Değiştirici .nav-pillssınıfında:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sas değişkenleri

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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>.

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Ve dikey haplarla. İdeal olarak, dikey sekmeler için sekme listesi kapsayıcısına da eklemelisiniz aria-orientation="vertical".

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Ulaşılabilirlik

ARIA Yazma Uygulamaları Kılavuzu sekme modelinde açıklandığı gibi dinamik sekmeli arabirimler, yapılarını, işlevlerini ve mevcut durumlarını yardımcı teknolojilerin (ekran okuyucular gibi) kullanıcılarına iletmek için gerektirir role="tablist", role="tab", role="tabpanel"ve ek öznitelikler. 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.

ARIA Yazma Uygulamaları modeline uygun olarak, yalnızca o anda etkin olan sekme klavye odağını alır. JavaScript eklentisi başlatıldığında, tabindex="-1"etkin olmayan tüm sekme kontrollerine ayarlanacaktır. Halihazırda etkin olan sekmeye odaklanıldığında, imleç tuşları önceki/sonraki sekmeyi etkinleştirir ve eklenti fitilitabindex buna göre değiştirir. Ancak, JavaScript eklentisinin imleç tuşu etkileşimleri söz konusu olduğunda yatay ve dikey sekme listeleri arasında ayrım yapmadığını unutmayın: sekme listesinin yönü ne olursa olsun, hem yukarı hem de sol imleç önceki sekmeye gider ve aşağı ve sağ imleç önceki sekmeye gider. sonraki sekme.

Genel olarak, klavyede gezinmeyi kolaylaştırmak için, sekme panelinde anlamlı içerik içeren ilk öğe zaten odaklanabilir değilse, sekme panellerinin kendilerinin de odaklanabilir hale getirilmesi önerilir. JavaScript eklentisi bu yönü ele almaya çalışmaz; uygun olduğunda, tabindex="0"işaretlemenizi ekleyerek sekme panellerinizi açıkça odaklanabilir hale getirmeniz gerekir.

JavaScript eklentisi sekmesi , açılır menüler içeren sekmeli arayüzleri desteklemez , çünkü bunlar hem kullanılabilirlik hem de erişilebilirlik sorunlarına neden olur. 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.

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

JavaScript aracılığıyla

JavaScript aracılığıyla sekmeli sekmeleri etkinleştirin (her sekmenin ayrı ayrı etkinleştirilmesi gerekir):

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

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

Tek tek sekmeleri birkaç şekilde etkinleştirebilirsiniz:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})