Bagaimana cara saya memodifikasi CSS untuk mengubah warna navbar di Twitter Bootstrap?
tl; dr - TWBSColor - Hasilkan navbar Bootstrap Anda sendiri
Catatan versi: - Alat online: Bootstrap 3.3.2+ / 4.0.0+ - Jawaban ini: Bootstrap 3.0.x
Anda punya dua navbar dasar:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>Berikut adalah warna-warna utama dan penggunaannya:
#F8F8F8: latar belakang navbar#E7E7E7: perbatasan navbar#777: warna default#333: arahkan warna ( #5E5E5Euntuk .nav-brand)#555: warna aktif#D5D5D5: latar belakang aktifJika Anda ingin memberikan gaya khusus, inilah CSS yang perlu Anda ubah:
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}Berikut adalah empat contoh navbar berwarna khusus:
Dan kode SCSS:
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}Saya baru saja membuat skrip yang memungkinkan Anda menghasilkan tema: TWBSColor - Buat navbar Bootstrap Anda sendiri
[Pembaruan]: TWBSColor sekarang menghasilkan kode SCSS / SASS / Less / CSS.
[Pembaruan]: Mulai sekarang, Anda dapat menggunakan Less sebagai bahasa default yang disediakan oleh TWBSColor
[Pembaruan]: TWBSColor sekarang mendukung pewarnaan menu drop-down
[Pembaruan]: TWBSColor sekarang memungkinkan untuk memilih versi Anda (dukungan Bootstrap 4 ditambahkan)
!importantke akhir dari setiap pernyataan CSS yang dikeluarkan tampaknya telah menyelesaikan masalah. Contoh:color: #ffffff;menjadicolor: #ffffff !important;.Perbarui 2020
Mengubah warna Navbar berbeda (dan sedikit lebih mudah) di Bootstrap 4 . Anda dapat membuat kelas navbar khusus, dan kemudian merujuknya untuk mengubah navbar tanpa memengaruhi nav Bootstrap lainnya ..
Bootstrap 4.3+
CSS yang diperlukan untuk mengubah Navbar jauh lebih sedikit di Bootstrap 4 ...
Bootstrap 4 Demo Navbar Kustom
Mengubah warna latar belakang tautan aktif / arahkan kursor juga berfungsi dengan CSS yang sama, tetapi Anda harus menyesuaikan bantalan jika Anda ingin warna bg mengisi ketinggian penuh tautan ...
py-0untuk menghapus bantalan vertikal dari seluruh navbar ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Bootstrap 4 Ubah Tautan dan Demo Warna Latar Belakang
Lihat juga: Bootstrap 4 Ubah Hamburger Toggler Color
Bootstrap 3
Demo Navbar Kustom saat Bootply
Jika Navbar memiliki dropdown, tambahkan yang berikut untuk mengubah warna dropdown:
Demo dengan Dropdown
sumber
Butuh beberapa saat, tetapi saya menemukan bahwa memasukkan yang berikut ini yang memungkinkan untuk mengubah warna navbar:
sumber
background-imageditambahkan, yang akan mencegah TWBSColor bekerja. Bisakah saya mengetahui versi Bootstrap Anda, dan lingkungan Anda? (tema tambahan, pustaka CSS ...)Menggunakan lebih sedikit
Anda juga dapat mempertimbangkan untuk mengkompilasi versi Anda sendiri. Coba http://getbootstrap.com/customize/ (yang memiliki bagian terpisah untuk pengaturan Navbars (navbar default dan Navbar terbalik)) atau unduh salinan Anda sendiri dari https://github.com/twbs/bootstrap .
Anda akan menemukan pengaturan navbar di
variables.less.navbar.lessdigunakan untuk mengkompilasi navbar (tergantung padavariables.lessdanmixins.less).Salin bagian 'navbar-default' dan isi pengaturan warna Anda sendiri. Mengubah variabel
variables.lessakan menjadi cara termudah (mengubah navbar default atau terbalik tidak akan menjadi masalah karena Anda memiliki satu navbar per halaman saja).Anda tidak akan mengubah semua pengaturan dalam kebanyakan kasus:
Anda juga dapat mencoba http://twitterbootstrap3navbars.w3masters.nl/ . Alat ini menghasilkan kode CSS untuk navbar khusus Anda. Secara opsional, Anda juga bisa menambahkan warna dan batas gradien ke navbar.
sumber
Cukup tambahkan id ke navbar HTML, seperti:
Dengan id ini Anda dapat menata warna navbar, tetapi juga tautan dan dropdown
Contoh diterapkan pada berbagai jenis navbar
Hitam
Kuning
Biru tua
Merah (ceri)
Hijau tua
Inilah CSS-nya
sumber
Apakah Anda harus mengubah CSS secara langsung? Bagaimana dengan...
sumber
Coba ini juga. Ini berhasil untuk saya.
sumber
Jika ini hanya tentang mengubah warna Navbar saran saya adalah menggunakan: Bootstrap Magic . Anda dapat mengubah nilai untuk properti Navbar yang berbeda dan melihat pratinjau.
Unduh hasilnya sebagai lembar gaya CSS khusus atau sebagai file Less variable. Anda dapat mengubah nilai dengan bidang input dan pemilih warna.
sumber
Di CSS navbar ini, setel untuk memiliki warna:
sumber
Contoh
Coba saja seperti ini:
Mengajukan
navabr.cssPenggunaan warna utama default adalah sebagai berikut:
Anda dapat mempelajari lebih lanjut di Untuk mengubah warna navbar di Twitter Bootstrap 3 .
sumber
Penyebutan nama kelas terbalik dan default di Twitter Bootstrap menyebabkan mereka menjadi warna hitam dan putih.
Lebih baik, Anda tidak harus menimpanya dan menambahkan kelas di dekat itu dan menulis gaya khusus untuk itu:
sumber
Menggunakan:
25+ Bootstrap Nav Menus Code
sumber