Bootstrap Navbar Part 1
Maret 27, 2017Assalamualaikum Wr.Wb
Berjumpa lagi dengan bootstrap kali ini saya akan membahas navbar bootstrap,namanya juga navbar pasti sudah banyak yang tahu bukan?tetapi membuat navbar bootstrap menurut saya lebih mudah karena lagi - lagi sudah tersedia style untuk membuat navbar sehingga membuat navbar menjadi lebih mudah,cepat dan hasilnya menurut saya cukup bagus,baiklah mari kita mulai
- Navigation bar
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Blog Amatir</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</body>
</html>
Dan inilah hasilnya
- Inverted Navigation Bar
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Blog Amatir</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</body>
</html>
Dan inilah hasilnya
- Navigation Bar Dropdown
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Blog Amatir</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="#">Contact
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Google Plus</a></li>
<li><a href="#">Email</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</body>
</html>
Dan ini hasilnya
- Right Aligned Navigation Bar
Ini di gunakan untuk membuat menu pada navbar tetapi dengan letak di sebelah kanan
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Blog Amatir</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="#">Contact
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Google Plus</a></li>
<li><a href="#">Email</a></li>
</ul>
</li>
<li><a href="#">About</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>
</nav>
</body>
</html>
Dan inilah hasilnya
Oke sebenarnya masih ada beberapa macam navbar, tetapi karena postingannya sudah cukup panjang maka akan saya sambung di postingan berikutnya,sekian sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
Oke sebenarnya masih ada beberapa macam navbar, tetapi karena postingannya sudah cukup panjang maka akan saya sambung di postingan berikutnya,sekian sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 comments