Bootstrap - Elemen Navigasi

Bootstrap menyediakan beberapa opsi berbeda untuk menata elemen navigasi. Semuanya berbagi markup dan kelas dasar yang sama,.nav. Bootstrap juga menyediakan kelas pembantu, untuk berbagi markup dan status. Tukar kelas pengubah untuk beralih di antara setiap gaya.

Tabular Navigation atau Tab

Untuk membuat menu navigasi tab -

Mulailah dengan daftar tidak berurutan dasar dengan kelas dasar .nav
Tambahkan kelas .nav-tabs.

Contoh berikut menunjukkan ini -

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

Navigasi Pil

Pil Dasar

Untuk mengubah tab menjadi pil, ikuti langkah-langkah yang sama seperti di atas, gunakan kelas .nav-pills dari pada .nav-tabs.

Contoh berikut menunjukkan ini -

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

Pil Vertikal

Anda dapat menumpuk pil secara vertikal menggunakan kelas .nav-stacked bersama dengan kelas - .nav, .nav-pills.

Contoh berikut menunjukkan ini -

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

Nav yang Dibenarkan

Anda dapat membuat tab atau pil dengan lebar yang sama seperti induknya pada layar yang lebih lebar dari 768 piksel menggunakan class .nav-justified bersama .nav, .nav-tabs atau .nav, .nav-pillsmasing-masing. Pada layar yang lebih kecil, tautan navigasi ditumpuk.

Contoh berikut menunjukkan ini -

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

Tautan yang Dinonaktifkan

Untuk masing-masing .nav kelas, jika Anda menambahkan .disabled kelas, itu akan membuat tautan abu-abu yang juga menonaktifkan :hover negara seperti yang ditunjukkan pada contoh berikut -

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

Kelas ini hanya akan mengubah tampilan <a>, bukan fungsinya. Gunakan JavaScript khusus untuk menonaktifkan tautan di sini.

Dropdown

Menu navigasi memiliki sintaks yang serupa dengan menu dropdown. Secara default, Anda memiliki item daftar yang memiliki jangkar yang bekerja bersama dengan beberapa atribut data untuk memicu daftar tidak berurutan dengan.dropdown-menu kelas.

Tab dengan Dropdown

Untuk menambahkan dropdown ke tab -

Mulailah dengan daftar tidak berurutan dasar dengan kelas dasar .nav
Tambahkan kelas .nav-tabs.
Sekarang tambahkan daftar tidak berurutan dengan file .dropdown-menu kelas.

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

Pil dengan Dropdown

Untuk melakukan hal yang sama dengan pil, cukup tukar .nav-tabs kelas dengan .nav-pills seperti yang ditunjukkan pada contoh berikut.

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