Twitter Bootstrap'ta navbar rengi

Twitter Bootstrap 2.0.2'nin gezinme çubuğunun arka plan rengini nasıl değiştirebilirim? Gezinme çubuğunun tüm öğelerinin rengini arka plan rengini yansıtacak şekilde nasıl değiştirebilirim?

.navbar-innerBootstrap.css stil sayfasını değiştirmek yerine kendi stil sayfanızda hedefleyerek sınıf dahil olmak üzere önyükleme renklerinin üzerine yazabilirsiniz , örneğin:

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

Tüm bu stilleri kendi başınıza değiştirmeniz yeterlidir ve bunlar, örneğin, tüm gradyan efektlerini ortadan kaldırdığım ve sadece düz bir siyah arka plan rengi ayarladığım gibi, bu gibi bir şey alınacaktır:

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

Colorzilla Gradient Editor gibi araçlardan faydalanabilir ve tüm tarayıcılar için kendi gradyan renklerinizi oluşturabilir ve orijinal renkleri kendinizinkiyle değiştirebilirsiniz.

Ve yorumlarda bahsettiğim gibi, bootstrap.css stil sayfasını doğrudan değiştirmenizi ^önermem çünkü tüm değişiklikleriniz stil sayfası güncellendikten sonra kaybolacak (mevcut sürüm ^v2.0.2 ), bu nedenle tüm değişiklikleri eklemeniz tercih edilir. bootstrap.css stil sayfasıyla birlikte kendi stil sayfanızdaki değişikliklerinizi. Ancak, tarayıcılarda tutarlılık sağlamak için tüm uygun özelliklerin üzerine yazmayı unutmayın.

Bootstrap temasının nasıl yapıldığını görmek için mükemmel bir kaynak: bootswatch.com . Güzel örnekleri var ve kodu da gösteriyor. Kısacası, bootstrap.css dosyasını yeni color-theme.css dosyanıza yeniden derlemek için lessc kullanırlar. Yaklaşımlarının güzel yanı, önyüklemenin üzerine inşa edilmesidir, bu nedenle önyükleme güncellendiğinde, yalnızca yeniden derlersiniz.

Lessc ve bootstrap kullanımıyla ilgili bağlantılar:

• Bootstrap'i daha az ile kullanma
• Lessc.org

"Daha az" öğrenmek veya bunu doğru bir şekilde yapmak için zamanınız yoksa, işte kirli bir hack ...

Bunu, önyükleme gezinme çubuğu HTML'sini oluşturduğunuz yere ekleyin - renkleri gerektiği gibi güncelleyin ..

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

Bootstrap'in özel bir sürümünü indirebilir ve @navbarBackground'u istediğiniz renge ayarlayabilirsiniz.

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

Bootstrap 3.2.0 sürümünü kullanıyorum ve sanki .navbar-interior artık yokmuş gibi görünüyor.

Buradaki .navbar-internal'i geçersiz kılmayı öneren çözümler benim için işe yaramadı - renk aynı kaldı.

Renk yalnızca aşağıda gösterildiği gibi .navbar'ı geçersiz kıldığımda değişti:

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

Şu anda aynısını yapmanın en iyi yolu, LESS komut satırı derleyicisini kullanarak kurmaktır.

$ npm install -g less jshint recess uglify-js

Bunu yaptıktan sonra, dizindeki daha az klasöre gidin ve ardından dosya değişkenlerini düzenleyin. Daha az ve gezinme çubuğunun rengi de dahil olmak üzere ihtiyacınız olana göre birçok değişkeni değiştirebilirsiniz.

@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%);

Bunu yaptıktan sonra, bootstrap dizininize gidin ve make komutunu çalıştırın.

LESS kullanıyorsanız, daha az kod için Mixins kullanabilirsiniz. Burada bir gradyan, border ve border-radius ekleyeceğim:

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

* Rails gem, twitter-bootstrap-rails kullanıyorsanız, bunu doğrudan bootstrap_and_overrides.css.less dosyasında yapıyorum *

benim yaptığım budur

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

tüm gezginler için iyi çalışıyor, demoyu burada görebilirsiniz http://caverne.fr üstte

Bootstrap.css 4784 satırında şunu görüyoruz:

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

İstenen efekti elde etmek için tüm 'arka plan görüntüsü' özellik bildirimlerini kaldırmanız gerekir.

Occam'ın usturası, daha karmaşık bir şeye ihtiyacınız olana kadar bunu yapmanız gerektiğini söylemez mi? Bu biraz zor ama hızlı bir düzeltme isteyen birinin ihtiyaçlarını karşılayabilir.

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

Bootstrap'in LESS veya SASS Sürümünü kullanıyorsanız. En verimli yol, LESS veya SASS dosyasında değişken adını değiştirmektir.

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

Bu, Bootstraps Navbar'ı değiştirmenin en kolay ve en verimli yoludur. Geçersiz kılmalar yazmanıza gerek yoktur ve kod temiz kalır.

Bootstrap resmi web sitesinde kendi sürümünüzü özelleştirebilirsiniz .

Aslında site.css'de değiştirmek istediğim herhangi bir şeyin üzerine yazıyorum, önyüklemeden sonra site.css'yi yüklemelisiniz, böylece sınıfların üzerine yazacaktır. Şimdi yaptığım şey, kendi küçük önyükleme temamla kendi sınıflarımı oluşturmaktı. Bunun gibi küçük şeyler

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

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

Doğrulama hatalarının beğenilerini de aynı şekilde değiştirdim.