css - ट्विटर बूटस्ट्रैप में Navbar रंग बदलें




twitter-bootstrap twitter-bootstrap-3 (9)

ट्विटर बूटस्ट्रैप में नेविबार के रंग को बदलने के लिए मैं सीएसएस को संशोधित करने के बारे में कैसे जाउंगा?

टीएल; डॉ - TWBSColor - अपना खुद का बूटस्ट्रैप navbar उत्पन्न करें

संस्करण नोट्स: - ऑनलाइन उपकरण: बूटस्ट्रैप 3.3.2+ / 4.0.0+ - यह उत्तर: बूटस्ट्रैप 3.0.x

उपलब्ध नौसेना

आपके पास दो बुनियादी नौसेनाएं हैं: 

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

डिफ़ॉल्ट रंग का उपयोग

मुख्य रंग और उनके उपयोग यहां दिए गए हैं:

  • #F8F8F8 : #F8F8F8 पृष्ठभूमि
  • #E7E7E7 : navbar सीमा
  • #777 : डिफ़ॉल्ट रंग
  • #333 : होवर रंग ( #5E5E5E .nav-brand )
  • #555 : सक्रिय रंग
  • #D5D5D5 : सक्रिय पृष्ठभूमि

डिफ़ॉल्ट शैली

अगर आप कुछ कस्टम स्टाइल डालना चाहते हैं, तो यहां सीएसएस है जिसे आपको बदलने की जरूरत है: 

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

कस्टम रंगीन navbar उदाहरण

कस्टम रंगीन नौसेना के चार उदाहरण यहां दिए गए हैं:

JSFiddle लिंक

और एससीएसएस कोड: 

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

और अंत में, एक छोटा सा उपहार

मैंने अभी एक स्क्रिप्ट बनाई है जो आपको अपनी थीम जेनरेट करने की अनुमति देगी: TWBSColor - अपना खुद का बूटस्ट्रैप navbar जेनरेट करें

[अपडेट]: TWBSColor अब एससीएसएस / एसएएसएस / Less / सीएसएस कोड उत्पन्न करता है।
[अपडेट]: अब से, आप TWBSColor द्वारा प्रदान की गई डिफ़ॉल्ट भाषा के रूप में कम उपयोग कर सकते हैं
[अपडेट]: TWBSColor अब ड्रॉप डाउन मेनू रंगीकरण का समर्थन करता है
[अपडेट]: TWBSColor अब आपके संस्करण को चुनने की अनुमति देता है (बूटस्ट्रैप 4 समर्थन जोड़ा गया)

कम प्रयोग करना

आप अपने स्वयं के संस्करण को संकलित करने पर भी विचार कर सकते हैं। http://getbootstrap.com/customize/ प्रयास करें (जिसमें Navbars सेटिंग्स (डिफ़ॉल्ट navbar और उलटा Navbar) के लिए एक अलग अनुभाग है) या https://github.com/twbs/bootstrap से अपनी खुद की प्रति डाउनलोड https://github.com/twbs/bootstrap ।

आपको variables.less में navbar सेटिंग्स मिल जाएगी। navbar.less का उपयोग navbar संकलित करने के लिए किया जाता है ( variables.less और mixins.less पर निर्भर करता है)।

'Navbar-default section' की प्रतिलिपि बनाएँ और अपनी खुद की रंग सेटिंग्स भरें। Variables.e में variables.less बदलना सबसे आसान तरीका होगा (डिफ़ॉल्ट या उलटा navbar बदलना कोई समस्या नहीं होगी क्योंकि आपके पास प्रति पृष्ठ केवल एक navbar है)।

आप ज्यादातर मामलों में सभी सेटिंग्स नहीं बदलेंगे: 

// 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/ भी आजमा सकते हैं। यह टूल आपके कस्टम navbar के लिए सीएसएस कोड उत्पन्न करता है। वैकल्पिक रूप से, आप नेविबार में ढाल रंग और सीमा भी जोड़ सकते हैं।

अगर यह केवल Navbar के रंग को बदलने के बारे में है तो मेरा सुझाव उपयोग करना होगा: बूटस्ट्रैप जादू । आप Navbar के विभिन्न गुणों के लिए मानों को बदल सकते हैं और एक पूर्वावलोकन देख सकते हैं। परिणाम को कस्टम सीएसएस स्टाइल शीट या कम चर फ़ाइल के रूप में डाउनलोड करें। आप इनपुट फ़ील्ड और रंग पिकर्स के साथ मूल्य बदल सकते हैं। Y

इस navbar सीएसएस में, रंग के लिए सेट करें: 

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

इसे भी आजमाएं यह मेरे लिए काम किया। 

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}

उदाहरण, बस इस तरह प्रयास करें 

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

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

डिफ़ॉल्ट प्रमुख रंग उपयोग नीचे दिए गए हैं:

  • नवरबार पृष्ठभूमि: # एफ 8 एफ 8 एफ 8
  • Navbar सीमा: # E7E7E7
  • डिफ़ॉल्ट रंग: # 777
  • एनवी ब्रांड होवर रंग: # 5E5E5E
  • होवर रंग: # 333
  • सक्रिय पृष्ठभूमि: # डी 5 डी 5 डी 5
  • सक्रिय रंग: # 555

आप और अधिक सीख सकते हैं http://fellowtuts.com/twitter-bootstrap/to-change-navbar-color-in-twitter-bootstrap-3/

क्या आपको सीएसएस को सीधे बदलना है? व्हाट अबाउट... 

<nav class="navbar navbar-inverse" style="background-color: #333399;">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

मुझे थोड़ी देर लग गई, लेकिन मुझे पता चला कि निम्नलिखित सहित, नेविबार रंग को बदलना संभव था: 

.navbar{ 
    background-image: none;
}

बूटस्ट्रैप 4 के लिए 2018 अपडेट किया गया

आप कस्टम नेविबार क्लास बना सकते हैं, और उसके बाद अन्य बूटस्ट्रैप नेविगेशन को प्रभावित किए बिना नेविबार को बदलने के लिए इसका संदर्भ लें .. 

<nav class="navbar navbar-custom">...</nav>

बूटस्ट्रैप 4.0.0

मुझे पता है कि मूल प्रश्न 3.x के लिए था, लेकिन मैंने सोचा कि एक नया बूटस्ट्रैप 4 उदाहरण भी सहायक होगा। बूटस्ट्रैप 4 में आवश्यक सीएसएस बहुत कम है ... 

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

बूटस्ट्रैप 4 कस्टम Navbar डेमो

बूटस्ट्रैप 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 पर कस्टम Navbar डेमो

अगर Navbar ड्रॉपडाउन है, ड्रॉपडाउन रंग बदलने के लिए निम्नलिखित जोड़ें: 

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

ड्रॉपडाउन के साथ डेमो




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


navbar