Source

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

<nav>Tabanlı gezinme kullanırken .nav-item, bağlantılara eklediğinizden emin olun.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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 şekilde, bağlantılara eklediğinizden emin olun.<nav>.nav-item

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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 .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-haspopup="true" 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" 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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

JavaScript davranışı

bootstrap.jsGezinme sekmelerimizi ve haplarımızı, açılır menüler aracılığıyla bile sekmeli yerel içerik bölmeleri oluşturacak şekilde genişletmek için JavaScript eklentisini tek tek veya derlenmiş dosya aracılığıyla ekleyin.

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

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-

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.

Ham denim, muhtemelen o jean şort Austin'i duymamışsınızdır. Nesciunt tofu stumptown aliqua, retro synth master temizliği. Bıyık klişe tempor, williamsburg carles vegan helvetica. Reprehenderit kasap retro keffiyeh dreamcatcher synth. Cosby kazak ab banh mi, irure terry richardson eski kalamar. Aliquip placeat salvia cillum iphone. Seitan aliquip quis hırka amerikan giyim, kasap voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud egzersiz proident est nisi. Irure magna elit commodo anim eski veniam culpa eiusmod id nostrud veniam reklamında cupidatat otur. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa quis hariç. Occaecat sit eu egzersiz ve Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit hariçtir. Id id tasavvur etmek, en geçerli eu aliqua occaecat quis et velit haricen laboratuvar mollit dolore eiusmod. Occaecat commodo et voluptate minim rehenderit mollit pariatur içinde Ipsum dolor. Enim et cillum ab ıssız, en az olay istisnası dışında.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Tek tek sekmeleri birkaç şekilde etkinleştirebilirsiniz:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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, DOM'da bir kapsayıcı düğümünü hedefleyen data-targetveya bir kapsayıcı düğümüne sahip olmalıdır.href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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 etkin 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 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})