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