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.
14 komentar
syntax highlighter nya itu pakek apa om?
Delete ReplyKeren...
bah,,, Ijin Praktek Om,,,!
Delete Replyia bang Syntax Highlighter Kerenn
silahkan lihat disini gan.
Delete Replyhttp://biongo-attacker.blogspot.co.id/2016/04/cara-membuat-prism-syntax-highlighter.html
silahkan om diprakter agar bisa lebih hebat lagi :D untuk syntax highlighter sudah ada tutorial-nya, bisa lihat di...
Delete Replyhttp://biongo-attacker.blogspot.co.id/2016/04/cara-membuat-prism-syntax-highlighter.html
ia gan Langsung OTW TKP :)
Delete Replyoke bro
Delete Replyom mau nanya dong, kan navbar nya udah rubah tuh, kalo misal warna font judul nya dirubah gimana ?
Delete Replyitu udah lama banget caranya gan, itu masih pake bootstrap versi 3, sekarang bootsrap sudah versi 4. Dan untuk ubah warna fontnya silahkan lihat di document bootsrap-nya, nih linknya https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes
Delete ReplySebenernya bisa juga sih, dengan cara seperti di bawah ini...
https://pastebin.com/6Bb9ycEG
Semoga bermanfaat gan dan dapat membantu :D
header.nya kegedean om
Delete Replyfile css nya disave dimana bang
Delete Replysip, it works.. terima kasih
Delete ReplyHello, just wanted to tell you, I liked this blog post. It was practical. Keep on posting!
Delete ReplySweet blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I've been trying for a while but I never seem to get there! Many thanks
Delete Replyko gagal yah?
Delete ReplyMohon untuk para pengunjung agar supaya meninggalkan komentar setelah membaca.Komentar anda sangat bermanfaat bagi kemajuan blog ini.
"Janganlah menjadi seorang pembaca yang pendiam tanpa meninggalkan jejak sedikit pun"