Assallamuallaikum Wr Wb ,.
Halo kawan kawan , di kesempatan kali ini saya akan sedikit berbagi materi / tutorial membuat Navigasi Tabs dan Piills menggunakan Bootstrap.
Inilah class Bootstrap yang paling banyak digunakan dan sangat besar kegunaanya dalam membangun sebuah front-end yang modern dan sangat menghemat waktu. Yaitu sobat dapat membuat navgasi tabs dan pils dengan sangat cepat dan menghemat waktu. Karena sobat hanya perlu menambahkan class - class yang disediakan oleh Bootstrap untuk membuat navigasi yang berbentuk tabs dan navigasi pils dengan Bootstrap.
Untuk lebih jelasnya di bawah ini saya akan paparkan contoh Dynamic navigasi tabs yang saya buat :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Tabs Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css " href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1><center>Dynamic Tabs Pada Bootstrap</center></h1>
<br>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><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="home" class="tab-pane fade in active">
<h2>HOME</h2>
<p>Tampilan Home pada Menu Utama </p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>MENU 1</h2>
<p>Isi content dari dynamic tabs pada Menu1 </p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>MENU 2</h2>
<p>Isi content dari dynamic tabs pada Menu2 </p>
</div>
<div id="menu3" class="tab-pane fade">
<h2>MENU 3</h2>
<p>Isi content dari dynamic tabs pada Menu3 </p>
</div>
</div>
</div>
</body>
</html> | |
| Hasil run dari script |
- Dalam script di atas terdapat clas="nav nav-tabs" itu adalah parameter yang telah di buat oleh Bootstrap untuk mendeklarasikan navigasi tabs. Dn kita hanya inggal memanggilnya saja.
- class="active" digunakan untuk mengaktifkan / menampilkan menu utama
- href="#home" digunakan untuk memanggil id yang di deklarasikan di dalam tiap tiap menu.
- class="tab-panel fade" digunakan untuk memberi efek tampil / munculnya menu ketika navigasi tabs di klik.
KESIMPULAN
Penggunaan tabs bisa menjadi pengganti dari penggunaan navigasi yang biasa , karna nab tabs terlihat lebih elegan dan animasinya terlihat lebih nyata dengan konten di dalamnya.
EmoticonEmoticon