Twitter Bootstrap'te navbar rengini değiştirme

Question

Jamal Khan

Daha

Kaynak Non AMP-version Düzenle

Twitter Bootstrap'te navbar rengini değiştirme

Twitter Bootstrap'te gezinme çubuğunun rengini değiştirmek için CSS'yi nasıl değiştirebilirim?

Zim

Edited question 2018ösp37ös20 Şubat 2018 в 8:37

Programlama

css twitter-bootstrap-3 twitter-bootstrap bootstrap-4 navbar

2013ööp19öö9 Ağustos 2013 в 9:19

36 görünümler

Zim

Kaynak Non AMP-version Düzenle

Bootstrap 4 için 2018'de güncellendi

Navbar rengini değiştirmek Bootstrap 4'te farklıdır (ve biraz daha kolaydır). Özel bir navbar sınıfı oluşturabilir ve ardından diğer Bootstrap nav'larını etkilemeden navbar'ı değiştirmek için ona başvurabilirsiniz.

...

Bootstrap 4.0

Navbar'ı değiştirmek için gereken CSS, Bootstrap 4'te çok daha azdır...

.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:hover .nav-link {
    color: #ffffff;
}

Bootstrap 4 Özel Navbar Demosu

Aktif /over link arka plan rengini değiştirmek de aynı CSS ile çalışır, ancak bg renginin linkin tüm yüksekliğini doldurmasını istiyorsanız dolguyu ayarlamanız gerekir...

navbar'ın tamamından dikey dolguyu kaldırmak için py-0...

..

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Bootstrap 4 Bağlantı ve Arka Plan Rengi Değiştirme Demosu

Ayrıca bakınız: https://stackoverflow.com/questions/42586729/

Bootstrap 3


  <div class="navbar-header">
    ...

    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...


.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}

.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}

Bootply üzerinde Özel Navbar Demosu

Navbar'da açılır menü varsa, açılır menü renklerini değiştirmek için aşağıdakileri ekleyin:

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

Dropdown ile Demo

Zim

Edited answer 2018ösp32ös15 Aralık 2018 в 3:32

195

0

Yorumlar (6)

Bass Jobsen

Kaynak Non AMP-version Düzenle

Daha Az Kullanmak

Kendi versiyonunuzu derlemeyi de düşünebilirsiniz. http://getbootstrap.com/customize/ adresini deneyin (Navbar ayarları için ayrı bir bölümü vardır (Varsayılan navbar ve Ters Navbar)) veya https://github.com/twbs/bootstrap adresinden kendi kopyanızı indirin.

Navbar ayarlarını variables.less içinde bulabilirsiniz. navbar.lessnavbar'ı derlemek için kullanılır (variables.lessvemixins.less` dosyalarına bağlıdır).

39;navbar-default bölümünü kopyalayın ve kendi renk ayarlarınızı girin. Değişkenleri variables.less içinde değiştirmek en kolay yol olacaktır (varsayılan veya ters navbarı değiştirmek sorun olmayacaktır çünkü sayfa başına yalnızca bir navbarınız vardır).

Çoğu durumda tüm ayarları değiştirmeyeceksiniz:

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

http://twitterbootstrap3navbars.w3masters.nl/ adresini de deneyebilirsiniz. Bu araç özel navbarınız için CSS kodu oluşturur. İsteğe bağlı olarak, gezinme çubuğuna degrade renkler ve kenarlıklar da ekleyebilirsiniz.

Peter Mortensen

Edited answer 2017ösp45ös22 Mart 2017 в 10:45

48

0

Yorumlar (0)

zessx · Accepted Answer · 2013-08-30T09:27:34+00:00

tl;dr - TWBSColor - Kendi Bootstrap navbarınızı oluşturun

Sürüm notları:

Çevrimiçi araç: Bootstrap 3.3.2+ / 4.0.0+

Bu cevap: Bootstrap 3.0.x

Mevcut gezinme çubukları

İki temel gezinme çubuğunuz var:

Varsayılan renk kullanımı

İşte ana renkler ve kullanımları:

#F8F8F8: navbar arka planı
#E7E7E7: navbar kenarlığı
#777: varsayılan renk
#333: hover rengi (.nav-brand için #5E5E5E)
#555: aktif renk
#D5D5D5: aktif arka plan

Varsayılan stil

Bazı özel stiller koymak istiyorsanız, işte değiştirmeniz gereken CSS:

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

Özel renkli navbar örnekleri

İşte dört özel renkli gezinme çubuğu örneği:

[JSFiddle bağlantısı][2]

Ve SCSS kodu:

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

Ve son olarak, küçük bir hediye

Temanızı oluşturmanızı sağlayacak bir betik hazırladım: TWBSColor - Kendi Bootstrap navbarınızı oluşturun

[Güncelleme]: TWBSColor artık SCSS/SASS/Less/CSS kodu üretiyor.
[Güncelleme]: Bundan böyle TWBSColor tarafından sağlanan varsayılan dil olarak Less'i kullanabilirsiniz
[Güncelleme]: TWBSColor artık açılır menüleri renklendirmeyi destekliyor [Güncelleme]: TWBSColor artık sürümünüzü seçmenize izin veriyor (Bootstrap 4 desteği eklendi)