Friday, 10 March 2017

membuat menu navigasi dengan bootstrap

membuat menu navigasi dengan bootstrap - membuat menu navigasi dengan bootstrap sangat mudah, kita hanya perlu memasukkan class yang sudah disiapkan sesuai kebutuhan. Kali ini saya akan membahas cara membuat menu navbar menggunakan bootstrap dengan mudah. Berikut scriptnya:



<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>nugroho</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" style="padding-right: 5px;"><!-- navbar inverse berfungsi  untuk membuat background gelap(hitam), navbar fixed top berfungsi agar pada saat halaman si scroll kebawah,menu tersebut tidak hilang (tetap) -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target-list"><!-- digunakan untuk halaman yang lebih kecil(mobile) -->
<span class="icon-bar"></span><!-- untuk membuat icon menu berupa garis - garis pada halaman yang lebih kecil -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">nugroho</a><!-- untuk membuat nama brand atau nama halaman -->
</div>
<div class="collapse navbar-collapse" id="target-list">
<ul class="nav navbar-nav">
<li> <a href="#">HOME</a></li>
<li> <a href="#">css</a></li>
<li> <a href="#">jaringan </a></li>
<li> <a href="#">about me</a></li>
</ul>
<form role="search" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search...">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</nav>
</body>
</html>

Berikut adalah hasilnya :





tadi adalah script bootstrap untuk membuat navigasi. dari script diatas kita dapat membuat sebuah kreasi dengan botstrap sesuai kreatifitas masing-masing. Jangan hanya terpaku pada sebuah contoh saja, lebih baik kembangkan kreatifitas yang kalian miliki.

Semoga bermanfaat, terima kasih


EmoticonEmoticon