1.temen-temen bisa membuat file header.html lalu simpan pada folder kemarin yang telah dibuat, untuk kode bisa copas dibawah ini
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Membuat Header responsive</title>
<!-- BOOTSTRAP STYLES-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
</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="#">Blangkon Koding</a>
</div> <div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</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>
<h1>1.BOOTSTRAP #MEMBUAT HEADER WEBSITE RESPONSIVE</h1>
<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
<!-- JQUERY SCRIPTS -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</body>
</html>
2. lalu buka file header.html dengan browser kalian, jika berhasil maka akan tampil seperti dibawah ini
Jika ingin penjelasan tentang kodingnya nanti akan saya jelaskan di channel youtube blangkon koding
Share This :
comment 0 komentar
more_vert