Cara mengganti warna navbar pada bootstrap - Banyak yang bingung bagaimana untuk mengganti warna navbar pada bootstrap.Saya juga waktu itu bingung bagaimana mereka membuat-nya, setelah saya mepelajari hal tersebut akhirnya saya bisa.Ternyata mereka hanya bermain css.Memang kita ketahui bersama pada navbar di bootstrap hanya ada dua warna yaitu warna putih (default) dan warna hitam (inverse).
Gambar diatas merupakan navbar default.Dan untuk merubah warna-nya sangat mudah, kita tinggal mencari kode dibawah ini, lalu kemudian ubah default menjadi inverse.
Setelah itu buat sebuah file yang bernama style.css, lalu ketik script dibawah ini.
Untuk script diatas kita tinggal menambahkan tag <style> pada bagian <head>
Kode keseluruhan-nya seperti dibawah.
Dan coba kita lihat gambar dibawah ini.
Sekarang navbarnya sudah berubah menjadi warna biru, dan untuk style nya kalian bisa tambahkan beberapa style, seperti font, warna font, dll.Untuk warnanya kalian bisa lihat di website www.color-hex.com/.Ada banyak sekali warna yang ada didalam website itu, tinggal kalian yang menyesuaikan saja.
<nav class="navbar navbar-default navbar navbar-fixed-top">
Setelah itu buat sebuah file yang bernama style.css, lalu ketik script dibawah ini.
.navbar-inverse{
background-color: #426edd;
}
Untuk script diatas kita tinggal menambahkan tag <style> pada bagian <head>
Kode keseluruhan-nya seperti dibawah.
<!DOCTYPE html>
<html>
<head>
<title>Membaut warna Navbar menjadi warna lain</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.navbar-inverse{
background-color: #426edd;
}
</style>
</head>
<body>
<!-- membuat menu navigasi -->
<nav class="navbar navbar-inverse navbar navbar-fixed-top">
<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="http://biongo-attacker.blogspot.co.id/">Biongo Attacker</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Profil <span class="sr-only">(current)</span></a></li>
<li><a href="#">Project</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">CodeIgniter</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Dan coba kita lihat gambar dibawah ini.
Sekarang navbarnya sudah berubah menjadi warna biru, dan untuk style nya kalian bisa tambahkan beberapa style, seperti font, warna font, dll.Untuk warnanya kalian bisa lihat di website www.color-hex.com/.Ada banyak sekali warna yang ada didalam website itu, tinggal kalian yang menyesuaikan saja.
