Cara Merubah Warna Navbar di Bootstrap

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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>
            .navbar-inverse{
                background-color: #FF00FF;
            }
        </style>

Untuk script lengkapnya, seperti berikut:

<!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:

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com

NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Cara Merubah Warna Navbar di Bootstrap, Diterbitkan oleh sourcecodeaplikasi1 pada Kamis, 21 April 2016. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.