Apa itu Navbar ?
NavBar atau Navigation Bar adalah sebuah balok navigasi yang terletak di bagian atas halaman web. Bentuknya kecil memanjang seukuran halaman web. Di dalam navbar terdapat menu-menu yang menuju halaman lain seperti profil, about, help, dll.
Secara default warna navbar pada Bootstrap ada dua, yaitu: inverse dan default. Perbedaan inverse dan default ada pada warna yang dihasilkan, inverse untuk membuat navbar berwarna gelap sedangkan default untuk membuat warna terang. Tapi terkadang kita ingin mengubah warna selain kedua warna tersebut. Untuk merubah warna dapat menggunakan CSS yang diletakkan di dalam tag <head>.
Berikut contoh script CSS merubah warna Navbar:
<style>Untuk script lengkapnya, seperti berikut:
.navbar-inverse{
background-color: #FF00FF;
}
</style>
<!DOCTYPE html>
<html lang="id">
<head>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<style>
.navbar-inverse{
background-color: #FF00FF;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">NamaWebKu</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Bantuan</a></li>
</ul>
</div>
</div>
</nav>
<script src="bootstrap-3.3.6-dist/jquery-1.12.2.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
Berikut perbedaan warna navbar yang dihasilkan:
 |
| navbar inverse |
 |
| new navbar |
 |
| navbar-default |
*Selamat mencoba.. ^_^
**download project "Cara Merubah Warna Navbar di Bootstrap"
Lihat juga:
No comments:
Write komentar