tRikSonic

Bootstrap 3 Navs - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.52

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>

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

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

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

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

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>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.