Assallamuallaikum Wr Wb ,.
Halo kawan kawan , pada kesempatan kali ini saya akan sedikit berbagi materi / tutorial membuat navigasi responsive menggunakan Bootstrap. Dalam penggunaan bootstrap kita sangatlah mudah untuk membuat suatu navigasi dalam website , karena kita hanya tinggal memanggil parameter parameter CSS yang sudah di sediakan oleh bootstrap.
Agar lebih jelasnya kita langsung masuk saja ke contoh dan penjelasan di bawahnya. Di bawah ini adalah contoh dari navbar yang saya buat menggunakan bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigasi Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nama Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Responsive Navbar</h3>
<p>Membuat navigasi bar yang responsive dengan menggunakan Bootstrap</p>
</div>
</body>
</html>
 |
| Hasil dari script |
Untuk lebih jelasnya saya akan memberi penjelasan sedikit tentang script di atas:
- Dlam pembuatan file navigasi ini saya menggunakan bootstrap offline yang saya download dan saya letakka dalam satu folder dengan file html nya.
- <nav class="navbar navbar-inverse"> script tersebut merupakan pemanggilan parameter style navigasi yang di buat oleh bootstrap.
- class="navbar header" adalah sebagai judul dari navigasi
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> script tersebut digunakan umtuk menyembunyikan navigasi apabila di buka di perangkat yang lebuh kecil dari PC/Dekstop.
- class="dropdown" digunakan untuk memberi submenu pada navigasi.
- class="dropdown-menu" adalah isi dai submenu .
- navbar-right adalah posisi navbar di kanan
KESIMPULAN
Pembuatan navbar dengan bootstrap dapat mempercepat kita dalam membuat navigasi dan membuat navigasi lebih menarik dan responsive.
EmoticonEmoticon