Assalamualaikum Wr. Wb.
Halo sobat , 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.
PEMBAHASAN
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.
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
Ok , itu saja penjelasan dari saya , jika masih belum jelas kawan kawan bisa membuka referensi lain misal di w3school
KESIMPULAN
Pembuatan navbar dengan bootstrap dapat mempercepat kita dalam membuat navigasi dan membuat navigasi lebih menarik dan responsive.
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>
Dan hasilnya seperti berikut.
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
Ok , itu saja penjelasan dari saya , jika masih belum jelas kawan kawan bisa membuka referensi lain misal di w3school
KESIMPULAN
Pembuatan navbar dengan bootstrap dapat mempercepat kita dalam membuat navigasi dan membuat navigasi lebih menarik dan responsive.
No comments:
Post a Comment