ट्विटर बूटस्ट्रैप में नेवबर कलर बदलें

जवाबों:

1392

tl; dr - TWBSColor - अपने खुद के बूटस्ट्रैप नावबार उत्पन्न करें

संस्करण नोट: - ऑनलाइन टूल: बूटस्ट्रैप 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: नवाब पृष्ठभूमि
  • #E7E7E7: नावबार सीमा
  • #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;
    }
}

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

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

यहां छवि विवरण दर्ज करें

और SCSS कोड:

$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 - अपने खुद के बूटस्ट्रैप नेवबर को उत्पन्न करें

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

— zessx
स्रोत
5
जब मैंने आउटपुट रंग योजना का उपयोग करने का प्रयास किया, तो रंग दिखाई नहीं दिए। आउटपुट किए !importantगए प्रत्येक सीएसएस विवरण के अंत में जोड़ने से लगता है कि समस्या का समाधान हो गया है। उदाहरण: color: #ffffff;बन जाता है color: #ffffff !important;।
— एड्रियन
2
@ एड्रियन: बूटस्ट्रैप की अपनी सीएसएस शामिल करने के बाद आपको इन अनुकूलन के साथ सीएसएस फ़ाइल को शामिल करना चाहिए। काम न करने के अन्य कारण हो सकते हैं यदि आप बूटस्ट्रैप-थीम का उपयोग करते हैं। अपनी साइट को Boostrap 2.x देने के लिए ढाल जैसा दिखें और महसूस करें
— Csaba Toth
2
पृष्ठभूमि-रंग के बजाय सिर्फ पृष्ठभूमि मेरे लिए काम करता है
— सागर शाह
2
मुझे लगता है कि नौसेना साइट उत्पन्न प्यार करता हूँ। काश आपके पास और आइटम होते जो मैं पैदा कर सकता था क्योंकि मैं इस हाहा पर बहुत भयानक हूँ
— कारो
2
बूटस्ट्रैप 4 सपोर्ट को TWBSColor में जोड़ा गया है, आनंद लें!
— zessx
209

अद्यतन 2020

बूटस्ट्रैप 4 में नवबार का रंग बदलना (और थोड़ा आसान) है । आप एक कस्टम नेबर क्लास बना सकते हैं, और फिर इसे अन्य बूटस्ट्रैप नेवी को प्रभावित किए बिना नेवबार बदलने के लिए संदर्भित कर सकते हैं।

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

बूटस्ट्रैप 4.3+

Navst को बदलने के लिए आवश्यक CSS बूटस्ट्रैप 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 कस्टम नेवबार डेमोयहां छवि विवरण दर्ज करें

सक्रिय / होवर लिंक बैकग्राउंड कलर को बदलना भी समान CSS के साथ काम करता है, लेकिन यदि आप चाहते हैं कि लिंक की पूरी ऊँचाई भरने के लिए आप चाहें तो पैडिंग को समायोजित कर सकते हैं ...

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

बूटस्ट्रैप 4 बदलें लिंक और पृष्ठभूमि रंग डेमो

इसे भी देखें: बूटस्ट्रैप 4 चेंज हैमबर्गर टॉगलर कलर

बूटस्ट्रैप ३

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

बूटपार् पर कस्टम नवबार डेमो

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

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

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

— Zim
स्रोत
1
मैं कैसे नौबर ली को बदल सकता हूं: आपके उदाहरण में पृष्ठभूमि-रंग होवर करें?
— एकनवंबर
6
इस विधि का उपयोग करके छोटे बटन पर नेवबर बटन दिखाई नहीं देता है।
— हेनरिकस्ट्रोम
3
यह सबसे अच्छा उपाय है क्योंकि यह किसी भी सीएसएस को ओवरराइट करने से बचता है और महत्वपूर्ण का उपयोग करने के बारे में चिंता करता है!
— सच्चाई .४२
2
मैंने अपने उत्तर को पूरी तरह से बदल दिया। यह 3.x और बूटस्ट्रैप 4 दोनों के लिए काम कर समाधान प्रदान करना चाहिए ।
— ज़िम
बूटस्ट्रैप 4 - क्या कोडप्ले डेमो अभी भी काम कर रहा है?
— मार्कोज़ेन
50

मुझे कुछ समय लगा, लेकिन मुझे पता चला कि निम्नलिखित में से क्या यह संभव हुआ कि नौबहार का रंग बदलना संभव है:

.navbar{ 
    background-image: none;
}
— fstopzero
स्रोत
1
मुझे नहीं पता कि यह समस्या क्यों ठीक करता है लेकिन धन्यवाद।
— साइमन मॉर्गन
6
क्योंकि इसकी बूटस्ट्रैप इस / * पृष्ठभूमि-छवि को जोड़ता है: रैखिक-ढाल (नीचे से, #fff 0%, # f8f8f8 100%); * / एक ढाल जोड़ने के लिए। मुझे यकीन नहीं है कि वे इसे और पृष्ठभूमि रंग को शामिल क्यों करते हैं
— डैनियल कोबे
@DanielKobe @Sumeet मैंने अभी बूटस्ट्रैप कोड की जाँच की है, और इसमें कोई background-imageजोड़ नहीं है, जो TWBSColor को काम करने से रोकेगा। क्या मुझे आपके बूटस्ट्रैप के संस्करण का पता चल सकता है, और आपका वातावरण कृपया? (अतिरिक्त विषय, सीएसएस पुस्तकालयों ...)
— zessx
@zessx ऐसा लगता है जैसे यह इस विषय के कारण है। मैं बूटस्ट्रैप 3.2.0 (सीडीएन) के लिए सरल विषय का उपयोग कर रहा था। इसे हटाने से पूरी बात हल हो गई।
— जैकव्हाइट आठ
पृष्ठभूमि-छवि को 'कोई नहीं' के लिए सेट करना, कम से कम नवीनतम संस्करणों के लिए समाधान प्रतीत होता है, जहां पृष्ठभूमि-छवि में एक विशिष्ट ढाल होता है जो पानी के नीले रंग को बरकरार रखता है, यहां तक ​​कि जब आप कस्टम एक पृष्ठभूमि-रंग निर्दिष्ट करते हैं। यह संभव है कि इस प्रश्न के लिए स्वीकृत उत्तर समय के साथ बासी हो गया हो। मैं बूटस्ट्रैप 3.3 का उपयोग कर रहा हूं।
— वारिअरपोस्टमैन
49

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

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

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

'नावबार-डिफॉल्ट सेक्शन' को कॉपी करें और अपनी रंग सेटिंग में भरें। चर को बदलना variables.lessसबसे आसान तरीका होगा (डिफ़ॉल्ट या उलटा नेवबार बदलना एक समस्या नहीं होगी क्योंकि आपके पास प्रति पृष्ठ केवल एक नेवबार है)।

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

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

— बास जॉब्स
स्रोत
10

बस HTML navbar में एक आईडी जोड़ें, जैसे:

<nav id="navbar-yellow" class="navbar navbar-default navbar-fixed-top" role="navigation">

इस आईडी से आप नेवर कलर को स्टाइल कर सकते हैं, बल्कि लिंक और ड्रॉपडाउन को भी

विभिन्न प्रकार के नौसैनिकों के लिए लागू उदाहरण

काली

पीला

गहरा नीला

लाल चेरी)

गहरा हरा

यहाँ सीएसएस है

/*
 * Black navbar style
 */
#navbar-black.navbar-default { /* #3C3C3C - #222222 */
    font-size: 14px;
    background-color: rgba(34, 34, 34, 1);
    background: -webkit-linear-gradient(top, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: linear-gradient(to bottom, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-black.navbar-default .navbar-nav>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>a:focus,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-black.navbar-default .navbar-nav>.active>a,
#navbar-black.navbar-default .navbar-nav>.active>a:hover,
#navbar-black.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#sidebar-black, #column-black {
      background-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle {
    border-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle:hover,
#navbar-black.navbar-default .navbar-toggle:focus {
    background-color: #3C3C3C;
}
#navbar-black.navbar-default .navbar-nav>li>a,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a,
#navbar-black.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-black.navbar-default .navbar-toggle .icon-bar,
#navbar-black.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-black.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Red navbar style
 */
#navbar-red.navbar-default { /* #990033 - #cc0033 */
    font-size: 14px;
    background-color: rgba(153, 0, 51, 1);
    background: -webkit-linear-gradient(top, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-red.navbar-default .navbar-nav>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>a:focus,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-red.navbar-default .navbar-nav>.active>a,
#navbar-red.navbar-default .navbar-nav>.active>a:hover,
#navbar-red.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-red, #column-red {
      background-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle {
    border-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle:hover,
#navbar-red.navbar-default .navbar-toggle:focus {
    background-color: #cc0033;
}
#navbar-red.navbar-default .navbar-nav>li>a,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a,
#navbar-red.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-red.navbar-default .navbar-toggle .icon-bar,
#navbar-red.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-red.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkblue navbar style
 */
#navbar-darkblue.navbar-default { /* #003399 - #0033cc */
    font-size: 14px;
    background-color: rgba(51, 51, 153, 1);
    background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>.active>a,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkblue, #column-darkblue {
    background-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle {
    border-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle:hover,
#navbar-darkblue.navbar-default .navbar-toggle:focus {
    background-color: #3333cc;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkblue.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkblue.navbar-default .navbar-toggle .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkgreen navbar style
 */
#navbar-darkgreen.navbar-default { /* #006633 - #009933 */
    font-size: 14px;
    background-color: rgba(0, 102, 51, 1);
    background: -webkit-linear-gradient(top, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkgreen, #column-darkgreen {
    background-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle {
    border-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle:hover,
#navbar-darkgreen.navbar-default .navbar-toggle:focus {
    background-color: #009933;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkgreen.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkgreen.navbar-default .navbar-toggle .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Yellow navbar style
 */
#navbar-yellow.navbar-default { /* #99ff00 - #ccff00 */
    font-size: 14px;
    background-color: rgba(153, 255, 0, 1);
    background: -webkit-linear-gradient(top, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-yellow.navbar-default .navbar-nav>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>.active>a,
#navbar-yellow.navbar-default .navbar-nav>.active>a:hover,
#navbar-yellow.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-yellow, #column-yellow {
    background-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle {
    border-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle:hover,
#navbar-yellow.navbar-default .navbar-toggle:focus {
    background-color: #ccff00;
}
#navbar-yellow.navbar-default .navbar-nav>li>a,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a,
#navbar-yellow.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-yellow.navbar-default .navbar-toggle .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}
— FabianW
स्रोत
क्या बूटस्ट्रैप 3 या 4 के लिए उपरोक्त है?
— मार्कोज़ेन
7

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

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

— eaglei22
स्रोत
6

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

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}
— सौरभ कुमार
स्रोत
4

यदि यह केवल नवबार के रंग को बदलने के बारे में है तो मेरा सुझाव उपयोग करना होगा: बूटस्ट्रैप मैजिक । आप नवबार के विभिन्न गुणों के लिए मान बदल सकते हैं और पूर्वावलोकन देख सकते हैं।

रिजल्ट को कस्टम CSS स्टाइल शीट के रूप में या कम चर फ़ाइल के रूप में डाउनलोड करें। आप इनपुट फ़ील्ड और रंग बीनने वालों के साथ मान बदल सकते हैं।

— थियो
स्रोत
3

इस navbar 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;
}
स्निपेट का विस्तार करें

— आशु डिजाइनर
स्रोत
"आप खुद के रंग के लिए सेट" से क्या मतलब है?
— पीटर मोर्टेंसन
1

उदाहरण

बस इसे इस तरह आज़माएँ:

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

डिफ़ॉल्ट प्रमुख रंग उपयोग निम्नानुसार हैं:

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

आप ट्विटर बूटस्ट्रैप 3 में नेवबार रंग बदलने के लिए और अधिक सीख सकते हैं ।

— core114
स्रोत
0

ट्विटर बूटस्ट्रैप में उलटे और डिफ़ॉल्ट वर्ग के नाम का उल्लेख उनके काले और सफेद रंग के कारण होता है।

बेहतर है, आपको इसे ओवरराइड नहीं करना चाहिए और उस के पास एक क्लास जोड़ना चाहिए और उसके लिए आपको विशेष शैली लिखना चाहिए:

my_style{
    background-color: green;
}
स्निपेट का विस्तार करें

— नांबी एन राजन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.