Bootstrap 3 Navs - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Navs

TrikSonic - Navs pada Bootstrap digunakan untuk membuat sebuah navigasi atau bantuan panduan berupa menu dan pada umumnya berisi sebuah link atau URL.

Berikut beberapa contoh yang bisa dipelajari tentang Bootstrap Navs :

Tabs

Metode yang digunakan untuk membuat navigasi berupa Tab.

Untuk menerapkannya gunakan class .nav sebagai class dasar dan disertai class .nav-tabs, yang dituliskan pada element HTML <ul>

Contoh :

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Beranda</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Tab View

Tab view artinya adalah sebuah tab peralihan yang jika ada interaksi oleh user maka akan memicu peralihan panel yang terlihat

Untuk menerapkannya tambahkan attribute data-toggle="tab" pada setiap tautan yang ada, kemudian target view element harus mempunyai Attribute ID unik dan mempunyai class dasar .tab-pane

Bungkus semua element tab dengan element HTML <div> berikan class .tab-content

Class tambahan yang bisa disisipkan pada .tab-pane adalah : .fade, .in dan .active

Contoh :

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

<!-- area tab view -->
<div class="tab-content">

  <div id="menu1" class="tab-pane fade in active">
    <h3>Menu 1</h3>
    <p>Konten lainnya</p>
  </div>
  
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Konten lainnya</p>
  </div>
  
  <div id="menu3" class="tab-pane fade">
    <h3>Menu 3</h3>
    <p>Konten lainnya</p>
  </div>
  
</div>

Pills

Bootstrap Pills pada dasarnya sama dengan Tabs, perbedaannya hanya terhadap tampilannya atau cara menampilkannya

Untuk menerapkannya gunakan class .nav sebagai class dasar dan disertai class .nav-pills, yang dituliskan pada element HTML <ul>

Contoh :

<ul class="nav nav-pills">
  <li class="active"><a href="#">Beranda</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Pills dengan metode Tab View

Cara dan penjelasannya hampir sama dengan Tab View yang sebelumnya, perbedaannya hanya pada penggunaan nama class.

Contoh :

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

<div class="tab-content">
  <div id="menu1" class="tab-pane fade in active">
    <h3>Menu 1</h3>
    <p>Konten lainnya</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Konten lainnya</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>Menu 3</h3>
    <p>Konten lainnya</p>
  </div>
</div>

Status Disabled

Untuk memberikan status tidak aktif atau disabled pada tab link, tambahkan class .disabled pada element <li>

Catatan : class disabled digunakan hanya untuk memberikan tampilan tidak aktif, sedangkan secara fungsi, link pada element masih tetap akan aktif jika terjadi interaksi

Tips : Agar fungsi dari element menjadi tidak berfungsi sebagaimana mestinya, tindakan manual mungkin dianjurkan, atau gunakan javascript untuk melakukan DOM element.

Contoh :

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li class="disabled"><a href="#">Menu 3</a></li>
</ul>

<hr/>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li class="disabled"><a href="#">Menu 3</a></li>
</ul>

Menggunakan Dropdown

Contoh :

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     Dropdown <span class="caret"></span>
    </a> 
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="divider"></li>
      <li><a href="#">Link Lainnya</a></li>
    </ul>
  </li>
</ul>

<hr/>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     Dropdown <span class="caret"></span>
    </a> 
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="divider"></li>
      <li><a href="#">Link Lainnya</a></li>
    </ul>
  </li>
</ul>

Posisi Vertikal

Untuk membuat sebuah navigasi tab secara vertikal gunakan class .nav-stacked pada class dasar .nav

Contoh :

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
</ul>