tRikSonic
Tema
/ / Bootstrap 3 Navs - Tutorial Bootstrap Indonesia

Bootstrap 3 Navs - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.52
/ / 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>

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.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.