Di Bootstrap 4, bagaimana cara mengubah warna latar belakang navbar? Kode dari twbscolor tidak berfungsi. Saya ingin membuat warna latar belakang dengan warna yang berbeda dan warna font putih.
<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Jordan Baron</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Update 2019
Ingatlah bahwa apa pun timpa CSS yang Anda tentukan harus memiliki spesifisitas CSS yang sama atau lebih besar agar dapat menimpa CSS Bootstrap'dengan benar.
Bootstrap 4.1+
Navbar bersifat transparan secara default. Jika Anda hanya ingin mengubah warna latar belakang, itu dapat dilakukan hanya dengan menerapkan warna ke &<navbar class="bg-custom">
, tetapi ingat bahwa itu tidak akan mengubah warna lain seperti tautan, hover, dan warna menu dropdown.
Berikut ini adalah CSS yang akan mengubah * semua warna Navbar yang relevan di Bootstrap 4...
/* change the background color */
.navbar-custom {
background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
Demo: http://www.codeply.com/go/U9I2byZ3tS
Mengabaikan Navbar Terang atau Gelap
Jika Anda menggunakan kelas Bootstrap 4 Navbar navbar-light
atau navbar-dark
, maka gunakan ini di override. Misalnya, mengubah warna tautan Navbar ...
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
color: #ffffff;
}
Saat membuat kustomisasi Bootstrap apa pun, Anda perlu memahami Kekhususan CSS. Overrides di CSS kustom Anda perlu menggunakan selektor yang sama spesifiknya dengan bootstrap.css. Baca selengkapnya
Navbar Transparan
Perhatikan bahwa Navbar Bootstrap 4 transparan secara default. Gunakan navbar-gelap
untuk warna latar belakang gelap / tebal, dan gunakan navbar-terang
jika navbar berwarna lebih terang. Ini akan mempengaruhi warna teks dan warna ikon toggler seperti yang dijelaskan di sini.
Update 2019 - Bootstrap v4.1+
Berikut'adalah cara yang jauh lebih sederhana untuk mengubah warna latar belakang navbar.
Cukup gunakan .navbar-dark
alih-alih .navbar-light
dan tambahkan kelas warna latar belakang kustom Anda seperti .bg-company-red
.navbar-dark
akan membuat semua tautan Anda berwarna putih.
HTML
<nav class="navbar navbar-dark bg-company-red">
Gaya CSS ...
.bg-company-red {
background-color: darkred !important;
}
Lihat http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes untuk dokumentasi resmi.
Aku mengerti. Ini sangat sederhana. Dengan menggunakan kelas bg
, Anda dapat melakukannya dengan mudah.
Mari saya tunjukkan kepada Anda:
<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>
Ini memberi Anda navbar
biru default
Jika Anda ingin mengubah warna favorit Anda, maka cukup gunakan tag gaya di dalam nav
:
<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">