Bootstrap - Gezinme Öğeleri

Bootstrap, gezinme öğelerini şekillendirmek için birkaç farklı seçenek sunar. Hepsi aynı işaretlemeyi ve temel sınıfı paylaşıyor,.nav. Bootstrap ayrıca işaretlemeyi ve durumları paylaşmak için bir yardımcı sınıf sağlar. Her stil arasında geçiş yapmak için değiştirici sınıflarını değiştirin.

Tablolu Gezinme veya Sekmeler

Sekmeli bir gezinme menüsü oluşturmak için -

Temel sınıfıyla temel bir sırasız listeyle başlayın. .nav
Sınıf ekleyin .nav-tabs.

Aşağıdaki örnek bunu göstermektedir -

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Hap Navigasyonu

Temel Haplar

Sekmeleri haplara dönüştürmek için, yukarıdakiyle aynı adımları izleyin, sınıfı kullanın .nav-pills onun yerine .nav-tabs.

Aşağıdaki örnek bunu göstermektedir -

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Dikey Haplar

Sınıfı kullanarak hapları dikey olarak istifleyebilirsiniz .nav-stacked sınıflarla birlikte - .nav, .nav-pills.

Aşağıdaki örnek bunu göstermektedir -

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Yaslanmış Gezinme

Sınıf kullanarak 768 pikselden daha geniş ekranlarda ebeveynleri ile eşit genişlikte sekme veya hap yapabilirsiniz .nav-justified ile birlikte .nav, .nav-tabs veya .nav, .nav-pillssırasıyla. Daha küçük ekranlarda gezinti bağlantıları yığılır.

Aşağıdaki örnek bunu göstermektedir -

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Devre Dışı Bağlantılar

Her biri için .nav sınıflar, eklerseniz .disabled sınıf, aynı zamanda devre dışı bırakan gri bir bağlantı oluşturacaktır. :hover aşağıdaki örnekte gösterildiği gibi durumu -

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Bu sınıf, <a> 'nin işlevselliğini değil sadece görünümünü değiştirecektir. Buradaki bağlantıları devre dışı bırakmak için özel JavaScript kullanın.

Açılır menüler

Gezinme menüleri, açılır menülerle benzer bir sözdizimi paylaşır. Varsayılan olarak, sırasız bir listeyi bir liste öğesiyle tetiklemek için bazı veri özellikleriyle birlikte çalışan bir bağlantıya sahip bir liste öğeniz vardır..dropdown-menu sınıf.

Açılır Menü İçeren Sekmeler

Sekmeye açılır menü eklemek için -

Temel sınıfıyla temel bir sırasız listeyle başlayın. .nav
Sınıfı ekleyin .nav-tabs.
Şimdi bir sırasız liste ekleyin .dropdown-menu sınıf.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Açılır Tabletler

Aynı şeyi haplarla yapmak için, .nav-tabs ile sınıf .nav-pills aşağıdaki örnekte gösterildiği gibi.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>