Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

Bootstrap 3 Navs - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Navs

TrikSonic - Navs pada Bootstrap dipakai untuk menciptakan sebuah navigasi atau pinjaman panduan berupa sajian dan pada umumnya berisi sebuah link atau URL.
Berikut beberapa pola yang dapat dipelajari ihwal Bootstrap Navs :

Tabs

Metode yang dipakai untuk menciptakan 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tabs</h2>  <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>  <!--note--> <p style="margin-top:25px;">  Tambahkan class <code>.active</code> pada element <code>LI</code>,   untuk memberi tanda daftar yang sedang aktif </p> </div>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Tab View

Tab view artinya yaitu sebuah tab peralihan yang kalau ada interaksi oleh user maka akan memicu peralihan panel yang terlihat
Untuk menerapkannya tambahkan attribute data-toggle="tab" pada setiap tautan yang ada, lalu sasaran view element harus memiliki Attribute ID unik dan memiliki class dasar .tab-pane
Bungkus semua element tab dengan element HTML <div> berikan class .tab-content
Class pemanis yang dapat disisipkan pada .tab-pane yaitu : .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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tab View</h2>   <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>  <div class="tab-content">   <div id="menu1" class="tab-pane fade in active">     <h2>Menu 1</h>     <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Pills

Bootstrap Pills intinya 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Pills</h2>  <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Pills Tab View</h2>  <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Status Disabled

Untuk memperlihatkan status tidak aktif atau disabled pada tab link, tambahkan class .disabled pada element <li>
Catatan : class disabled dipakai hanya untuk memperlihatkan tampilan tidak aktif, sedangkan secara fungsi, link pada element masih tetap akan aktif kalau terjadi interaksi
Tips : Agar fungsi dari element menjadi tidak berfungsi sebagaimana mestinya, tindakan manual mungkin dianjurkan, atau gunakan javascript untuk melaksanakan 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tab Disabled</h2>  <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>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tabs Dengan Dropdown Menu</h2>  <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>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Posisi Vertikal

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

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Nav-stacked</h2>  <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>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>