in English

Gezinmeler

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

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. 
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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

<nav class="nav">
  <a class="nav-link active" 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:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" 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:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" 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).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" 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>.

<nav class="nav flex-column">
  <a class="nav-link active" 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 .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" 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>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" 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.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" 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>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" 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.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" 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, sınıfla birlikte görsel olarak sekmeler olarak tasarlanmış olsalar 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 .role="tablist"role="tab"role="tabpanel"

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

JavaScript davranışı

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

JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .

ARIA Yazma Uygulamaları Kılavuzu sekmeleri deseninde 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.

JavaScript eklentisi sekmesinin, açılır menüler içeren sekmeli arayüzleri desteklemediğini unutmayın , çü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 bakış 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.

Sekme paneli için yer tutucu içeriği. Bu, ana sayfa sekmesiyle ilgilidir. Seni kilometrelerce yükseğe çıkarıyor, çünkü o uluslararası bir gülümsemeye sahip. Yatağımda bir yabancı var, kafamda bir zonklama var. Oh hayır. Başka bir hayatta kalmanı sağlardım. Çünkü ben, ben her şeyi yapabilirim. En büyük savaşım için hazırlanıyorum. Ailenin içkisini çalıp çatıya çıkmak için kullanılırdı. Ton, bronz fit ve hazır, açın, çünkü ağırlaşıyor. Onun aşkı uyuşturucu gibidir. Sanırım bir seçeneğim olduğunu unuttum.

Sekme paneli için yer tutucu içeriği. Bu, profil sekmesiyle ilgilidir. En iyi mimariye sahipsin. Pasaport pulları, o kozmopolit. Güzel, taze, şiddetli, kilitledik. Bir gün seni kaybedeceğimi asla planlamadım. Kalbini yiyor. Öpücüğün kozmik, her hareket sihir. Demek istediğim, sanki o varmış gibi. Selamlar sevdiklerim hadi bir yolculuğa çıkalım. Sadece 4 Temmuz gibi geceye sahip olun! Ama boşa gitmeyi tercih edersin.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

Sekme paneli için yer tutucu içeriği. Bu, ana sayfa sekmesiyle ilgilidir. Seni kilometrelerce yükseğe çıkarıyor, çünkü o uluslararası bir gülümsemeye sahip. Yatağımda bir yabancı var, kafamda bir zonklama var. Oh hayır. Başka bir hayatta kalmanı sağlardım. Çünkü ben, ben her şeyi yapabilirim. En büyük savaşım için hazırlanıyorum. Ailenin içkisini çalıp çatıya çıkmak için kullanılırdı. Ton, bronz fit ve hazır, açın, çünkü ağırlaşıyor. Onun aşkı uyuşturucu gibidir. Sanırım bir seçeneğim olduğunu unuttum.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Sekme paneli için yer tutucu içeriği. Bu, ana sayfa sekmesiyle ilgilidir. Seni şehir merkezinde Blues söylerken gördüm. Kanalizasyonun etrafında dönmeni izle. Neden uğramama izin vermiyorsun? Ağır, tacı giyen kafadır. Evet, gökten yeryüzüne yağdıran melekleri ağlatıyoruz. Gösteriyi bir film olan 3D olarak görmek istiyorum. Hiç hissettin mi, çok kağıt inceliği hissettin mi? Evet ya da hayır, belki hayır.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Veri özniteliklerini kullanma

Bir öğeyi basitçe belirterek data-toggle="tab"veya üzerinde JavaScript yazmadan bir sekmeyi veya hap navigasyonunu etkinleştirebilirsiniz . data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

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

Tek tek sekmeleri birkaç şekilde etkinleştirebilirsiniz:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().sekme

Bir sekme öğesini ve içerik kapsayıcısını etkinleştirir. Sekme data-target, bir bağlantı kullanılıyorsa, hrefDOM'daki 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('göster')

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.

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

.tab('atmak')

Bir öğenin sekmesini yok eder.

Olaylar

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

  1. hide.bs.tab(geçerli aktif sekmede)
  2. show.bs.tab(gösterilecekler sekmesinde)
  3. hidden.bs.tab(önceki etkin sekmede, hide.bs.tabetkinlikle aynı)
  4. 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
göster.bs.sekmesi Bu olay, sekme gösterisinde, ancak yeni sekme gösterilmeden önce tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi (varsa) hedeflemek için event.targetve düğmelerini kullanın .event.relatedTarget
gösterilen.bs.sekmesi Bu olay, bir sekme gösterildikten sonra sekme gösterisinde tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi (varsa) hedeflemek için event.targetve 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.targetve kullanın .event.relatedTarget
gizli.bs.sekmesi Bu olay, yeni bir sekme gösterildikten sonra tetiklenir (ve bu nedenle önceki etkin sekme gizlenir). Sırasıyla önceki etkin sekmeyi ve yeni etkin sekmeyi hedeflemek için event.targetve kullanın .event.relatedTarget 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})