warna navbar di Twitter Bootstrap

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?

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.

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:

• Menggunakan bootstrap dengan lebih sedikit
• Lessc.org

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>

Anda dapat mengunduh versi khusus dari bootstrap dan menyetel @navbarBackground ke warna yang Anda inginkan.

http://twitter.github.com/bootstrap/customize.html

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;
}

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.

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 *

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

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.

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
}

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.

Anda dapat menyesuaikan versi Anda sendiri di situs web resmi Bootstrap .

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.