Twitter Bootstrap'te gezinme çubuğunun rengini değiştirmek için CSS'yi nasıl değiştirebilirim?
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
İki temel gezinme çubuğunuz var:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
İş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 planBazı ö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;
}
}
İş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; }}}
}
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)
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.
<nav class="navbar navbar-custom">...</nav>
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
...
<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>
/* 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
<nav class="navbar navbar-custom">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
...
</nav>
.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;
}
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.lessve
mixins.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.