Ada Apa denga Bootstrap??? itu mungkin pertanyaannya. Bootstrap adalah sebuah framework untuk membangun sebuah web/blog yang dominannya digunakan untuk membuat template atau theme, karena pada bootstrap sudah tersedia CSS dan JavaScrip dengan tampilan sangat profesional walaupun kemampuan koding kita pas-pasan bahkan support dengan tampilan tablet dan mobile smartphone. Sekian dulu membahas tentang bootstrap silakan agan-agan mencari tau leibh jauh tentang bootstrap bahakan ane yakin sebagian besar yang membaca artikel ini sudah tau tentang bootstrap.
Oke sekarang kita ke inti masalah yaitu membuat menu navigasi, berikut adalah seubah header dengan menu navigasi standar pada bootstrap.
Kode HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Inline</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NamaWebsite</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Beranda <span class="sr-only">(current)</span></a></li>
<li><a href="#">HTML</a></li>
<li class="dropdown">
<a href="#" class=S"dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="form">
<div class="input-group">
<span class="input-group-addon" id="username">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="pwd">!</span>
<input type="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button type="submit" class="btn btn-info">Sign Up</button>
</form>
</div>
</div>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Navigasi Keren 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">NamaWebsite</a>
</div>
<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 11</a></li>
<li><a href="#">Page 12</a></li>
<li><a href="#">Page 13</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">
<a href="#"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> Sign Up</button></a>
<a href="#"><button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button></a>
</ul>
</div>
</nav>
<div class="container">
<h3>Menu Navigasi Sederhana</h3>
<p>Membuat Menu Navigasi Dropdown dan Tombol Hover pada Sign Up dan Login dengan Bootstrap</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Navigasi Keren 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">NamaWebsite</a>
</div>
<a href="#"><button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-home"></span> Home</button></a>
<a href="#"><button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-pencil"></span> Info</button></a>
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-cog"></span> Action</button>
<button type="button" class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<a href="#"><button type="button" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-flash"></span> Warning</button></a>
<ul class="nav navbar-nav navbar-right">
<a href="#"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> Sign Up</button></a>
<a href="#"><button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button></a>
</ul>
</div>
</nav>
<div class="container">
<h3>Menu Navigasi Sederhana</h3>
<p>Membuat Menu Navigasi Dropdown dan Tombol Hover dengan Bootstrap</p>
</div>
</body>
</html>
Kode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Navigasi Keren 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">NamaWebsite</a>
</div>
<a href="#"><button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-home"></span> Home</button></a>
<a href="#"><button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-pencil"></span> Info</button></a>
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-cog"></span> Action</button>
<button type="button" class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<a href="#"><button type="button" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-flash"></span> Warning</button></a>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<a href="#"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> Sign Up</button></a>
<a href="#"><button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button></a>
</ul>
</div>
</nav>
<div class="container">
<h3>Menu Navigasi Sederhana</h3>
<p>Membuat Menu Navigasi Dropdown dan Tombol Hover dan Kolom Pencarian dengan Bootstrap</p>
</div>
</body>
</html>
Menu Navigasi Sederhana
Demikian agan-agan sedikit ilmu dari ane yang masih belajar dengan ilmu perkodingan, semoga bermanfaat. Jangan lupa kasih komen ya kalau ada yang kurang sempurna dan berikan masukan dan lengkapi kodenya jika ada yang kurang menurut agan-agan. Terima kasih.
0 komentar: