warna navbar di Twitter Bootstrap

113

Bagaimana cara mengubah warna latar belakang bilah navigasi Twitter Bootstrap 2.0.2? Bagaimana cara mengubah warna semua elemen bilah navigasi untuk mencerminkan warna latar belakang?

Gattoo
sumber
1
Terpecahkan. Membuat perubahan di bootstrap.css .navbar-inner {background-color: # 2c2c2c; mengubah warna latar belakang, mengomentari yang lainnya. Terima kasih.
Gattoo
12
jangan menganjurkan Anda memodifikasi stylesheet css utama bootstrap hanya karena ketika Anda memperbarui stylesheet semua perubahan Anda akan hilang, jadi cukup sertakan modifikasi apa pun yang Anda perlukan di stylesheet Anda sendiri.
Andres Ilich
Terima kasih Andres, Apa cara lain untuk mengubah perilaku Bootstrap? Navbar sangat merepotkan bagi sebagian besar situs karena mereka tidak percaya bahwa web itu bagus untuk estetika dan juga fungsinya.
Gattoo
4
Anda sebenarnya dapat menimpa sebagian besar aturan bootstrap di dalam lembar gaya Anda sendiri, Anda tidak perlu menyentuh lembar gaya bootstrap.css sama sekali. Dengan cara ini ketika bootstrap diperbarui Anda dapat segera memperbaruinya dan semua perubahan Anda akan tetap ada, dan juga dengan cara ini Anda dapat menimpa gaya boostrap agar sesuai dengan kebutuhan Anda (baik itu font atau warna) dari situs Anda.
Andres Ilich
Jawaban yang jauh lebih sederhana: stackoverflow.com/questions/18529274/…
Chris Johnson

Jawaban:

134

Anda dapat menimpa warna bootstrap, termasuk .navbar-innerkelasnya, dengan menargetkannya di stylesheet Anda sendiri daripada mengubah stylesheet bootstrap.css, seperti:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

Anda hanya perlu memodifikasi semua gaya itu dengan gaya Anda sendiri dan semuanya akan diambil, seperti ini misalnya, di mana saya menghilangkan semua efek gradien dan hanya menetapkan warna latar belakang hitam pekat:

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

Anda dapat memanfaatkan alat-alat seperti Editor Gradien Colorzilla dan membuat warna gradien Anda sendiri untuk semua browser dan mengganti warna asli dengan warna Anda sendiri.

Dan seperti yang saya sebutkan di komentar, saya tidak akan merekomendasikan Anda memodifikasi stylesheet bootstrap.css secara langsung karena semua perubahan Anda akan hilang setelah stylesheet diperbarui (versi saat ini adalah v2.0.2 ) jadi sebaiknya Anda menyertakan semua perubahan Anda di dalam lembar gaya Anda sendiri, bersama-sama dengan lembar gaya bootstrap.css. Namun ingatlah untuk menimpa semua properti yang sesuai agar memiliki konsistensi di seluruh browser.

Andres Ilich
sumber
2
background-image: none;enam kali?
Nowaker
2
@DamianNowak woh, baru menyadari itu, terima kasih atas tipnya: D otak paling kentut.
Andres Ilich
Terima kasih. Itu membuat saya gila karena saya tidak bisa mengatur warna latar belakang apa pun dan menerapkannya ke seluruh bilah navigasi.
Automatico
30

Sumber yang bagus untuk melihat bagaimana membuat tema bootstrap adalah: bootswatch.com . Ini memiliki contoh yang bagus dan menunjukkan kode juga. Singkatnya, mereka menggunakan lessc untuk mengkompilasi ulang bootstrap.css ke color-theme.css baru Anda. Hal yang menyenangkan dari pendekatan mereka adalah dibangun di atas bootstrap, jadi ketika bootstrap diperbarui, Anda cukup mengkompilasi ulang.

Tautan tentang menggunakan lessc dan bootstrap:

Alexander Poslavsky
sumber
Sumber daya yang luar biasa Alexander. Terima kasih banyak.
Gattoo
1
Terima kasih untuk tautan bootswatch :)
Akshat Jiwan Sharma
6

Jika Anda tidak punya waktu untuk belajar "lebih sedikit" atau melakukannya dengan benar, berikut adalah cara jorok ...

Tambahkan ini di atas di mana Anda merender HTML bilah navigasi bootstrap - perbarui warna sesuai kebutuhan ..

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>
JGilmartin
sumber
4

Saya menggunakan Bootstrap versi 3.2.0 dan sepertinya .navbar-inner sudah tidak ada lagi.

Solusi di sini yang menyarankan pengesampingan .navbar-inner tidak berhasil untuk saya - warnanya tetap sama.

Warnanya hanya berubah ketika saya mengganti .navbar seperti yang ditunjukkan di bawah ini:

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}
paulo62
sumber
3

Cara terbaik saat ini untuk melakukan hal yang sama adalah dengan menginstal compiler baris perintah LESS menggunakan

$ npm install -g less jshint recess uglify-js

Setelah Anda melakukan ini, buka folder less di direktori dan kemudian edit file variable.less dan Anda dapat mengubah banyak variabel sesuai dengan yang Anda butuhkan termasuk warna bilah navigasi

@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

Setelah Anda selesai melakukannya, buka direktori bootstrap Anda dan jalankan perintah make.

gauravmunjal
sumber
2

Jika Anda menggunakan LESS, Anda dapat menggunakan Mixins untuk kode yang lebih sedikit. Di sini saya akan menambahkan gradien, batas, dan radius batas:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

* Jika Anda menggunakan permata rails, twitter-bootstrap-rails, saya melakukan ini langsung di file bootstrap_and_overrides.css.less *

Ryan
sumber
2

itulah yang saya lakukan

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

ini bekerja dengan baik untuk semua navigator Anda dapat melihat demo di sini http://caverne.fr di atas

pengguna2545728
sumber
1

Pada baris bootstrap.css 4784 kita melihat:

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

Anda perlu menghapus semua deklarasi properti 'background-image' untuk mendapatkan efek yang diinginkan.

Roopkunwar
sumber
1

Bukankah pisau cukur occam akan mengatakan untuk melakukan ini saja sampai Anda membutuhkan sesuatu yang lebih kompleks? Ini sedikit hack, tetapi mungkin sesuai dengan kebutuhan seseorang yang menginginkan perbaikan cepat.

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}
Krishan Gupta
sumber
1

Jika Anda menggunakan Versi LESS atau SASS dari Bootstrap. Cara paling efisien adalah dengan mengubah nama variabel, di file LESS atau SASS.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

Sejauh ini cara termudah dan paling efisien untuk mengubah Navbar Bootstraps. Anda tidak perlu menulis timpaan, dan kode tetap bersih.

Ronak Jain
sumber
0

Saya sebenarnya hanya menimpa apa pun yang ingin saya ubah di site.css, Anda harus memuat site.css setelah bootstrap sehingga akan menimpa kelas. Apa yang saya lakukan sekarang hanyalah membuat kelas saya sendiri dengan tema bootstrap kecil saya sendiri. Hal-hal kecil seperti ini

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

Saya juga mengubah suka dari kesalahan validasi dengan cara yang sama.

Michael
sumber