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

Question

मैं ट्विटर बूटस्ट्रैप 2.0.2 के नावबार की पृष्ठभूमि का रंग कैसे बदल सकता हूं? मैं पृष्ठभूमि के रंग को प्रतिबिंबित करने के लिए नेबर के सभी तत्वों का रंग कैसे बदल सकता हूं?

Comments

हल किया। Bootstrap.css .navbar-inner {पृष्ठभूमि-रंग: # 2c2c2c में किए गए परिवर्तन; पृष्ठभूमि का रंग बदल दिया, बाकी सब कुछ टिप्पणी की। धन्यवाद।

— 7

आपको केवल बूटस्ट्रैप मुख्य सीएसएस स्टाइलशीट को संशोधित करने की अनुशंसा नहीं करता है क्योंकि जब आप स्टाइलशीट को अपडेट करते हैं तो आपके सभी परिवर्तन खो जाएंगे, इसलिए बस अपनी शैली में आपको जो भी संशोधन की आवश्यकता है उसे शामिल करें।

— एंड्रेस इलिच

धन्यवाद एन्ड्रेस, बूटस्ट्रैप के व्यवहार को बदलने के अन्य तरीके क्या हैं? नौसिखिया ज्यादातर साइटों के लिए एक दर्द है क्योंकि वे लोगों को विश्वास नहीं कर पा रहे हैं कि वेब सौंदर्यशास्त्र के लिए उतना ही अच्छा है जितना कि यह कार्यक्षमता के लिए है।

— टैटू

आप वास्तव में अपने स्वयं के स्टाइलशीट के अंदर अधिकांश बूटस्ट्रैप नियमों को अधिलेखित कर सकते हैं, आपको बूटस्ट्रैप.एससी स्टाइलशीट को बिल्कुल भी छूने की आवश्यकता नहीं है। इस तरह से जब बूटस्ट्रैप को अपडेट किया जाता है, तो आप बस यह अपडेट कर सकते हैं कि तुरंत और आपके सभी परिवर्तन बने रहेंगे, और इस तरीके से भी आप अपनी साइट को फिट करने के लिए बूस्टरैप शैली को ओवरराइट कर सकते हैं (अपनी साइट के फोंट या रंग हो)।

— एंड्रेस इलिच

बहुत सरल उत्तर: stackoverflow.com/questions/18529274/…

— क्रिस जॉनसन

Answer 1

आप बूटस्ट्रैप रंगों को .navbar-innerवर्ग सहित , अपनी खुद की स्टाइलशीट में लक्ष्य करके, जैसे बूटस्ट्रैप को संशोधित करने का विरोध कर सकते हैं। स्टाइलशीट, जैसे:

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

आपको बस उन सभी शैलियों को अपने साथ संशोधित करना होगा और वे उठेंगी, जैसे कि उदाहरण के लिए कुछ इस तरह, जहां मैं सभी ढाल प्रभाव को समाप्त कर देता हूं और बस एक ठोस काले रंग की पृष्ठभूमि सेट करता हूं:

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

आप Colorzilla ग्रैडिएंट एडिटर के रूप में इस तरह के टूल का लाभ उठा सकते हैं और सभी ब्राउज़रों के लिए अपने खुद के ढाल रंग बना सकते हैं और मूल रंगों को अपने दम पर बदल सकते हैं।

और जैसा कि मैंने टिप्पणियों पर उल्लेख किया है, मैं आपको बूटस्ट्रैप.शैट्स स्टाइलशीट को सीधे संशोधित करने की अनुशंसा नहीं करूंगा क्योंकि स्टाइलशीट अपडेट होने के बाद आपके सभी परिवर्तन समाप्त हो जाएंगे (वर्तमान संस्करण ^{v2.0.2 है} ) इसलिए यह पसंद किया जाता है कि आप सभी शामिल हैं अपने स्वयं के स्टाइलशीट के अंदर आपके परिवर्तन, बूटस्ट्रैप के साथ मिलकर शैली पत्रक। लेकिन याद रखें कि ब्राउज़रों में स्थिरता रखने के लिए सभी उपयुक्त गुणों को अधिलेखित करें।

Comments

background-image: none;छ: बार?

— नौकर

@DamianNowak वोह, बस देखा कि, टिप के लिए धन्यवाद: डी परम मस्तिष्क गोज़।

— एंड्रेस इलिच

धन्यवाद। यह मुझे पागल बना रहा था कि मैं पूरे नवबार पर लागू करने के लिए जो कुछ भी प्राप्त कर सकता हूं, वह पृष्ठभूमि-रंग को निर्धारित नहीं कर सका।

— Automatico

Answer 2

बूटस्ट्रैप को कैसे थीम दिया जाए, यह देखने के लिए एक उत्कृष्ट संसाधन है: bootswatch.com । इसके अच्छे उदाहरण हैं और कोड भी दिखाता है। संक्षेप में, वे bootstrap.css को आपके नए रंग-theme.css में फिर से जोड़ने के लिए पट्टिका का उपयोग करते हैं। उनके दृष्टिकोण की अच्छी बात यह है कि बूटस्ट्रैप के शीर्ष पर बनाया गया है, इसलिए जब बूटस्ट्रैप को अपडेट किया जाता है, तो आप बस फिर से जोड़ते हैं।

सबक और बूटस्ट्रैप का उपयोग करने के बारे में लिंक:

• कम के साथ बूटस्ट्रैप का उपयोग करना
• Lessc.org

Comments

अद्भुत संसाधन अलेक्जेंडर। बहुत बहुत धन्यवाद।

— टैटू

बूटवॉच लिंक के लिए धन्यवाद :)

— अक्षत जीवन शर्मा

Answer 3

यदि आपको "कम" सीखने या इसे ठीक से करने का समय मिल गया है, तो यहां एक गंदा हैक ...

इसे ऊपर जोड़ें जहां आप बूटस्ट्रैप नेवी बार HTML रेंडर करते हैं - आवश्यकतानुसार रंगों को अपडेट करें ..

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

Answer 4

आप बूटस्ट्रैप का एक कस्टम संस्करण डाउनलोड कर सकते हैं और @navbarBackground को इच्छित रंग में सेट कर सकते हैं।

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

Answer 5

मैं बूटस्ट्रैप संस्करण 3.2.0 का उपयोग कर रहा हूं और ऐसा लगता है कि .navbar- इनर का कोई और अस्तित्व नहीं है।

यहाँ समाधान जो ओवरराइडिंग का सुझाव देते हैं ।navbar-inner ने मेरे लिए काम नहीं किया - रंग वही रहा।

रंग तब ही बदल गया जब मैंने नीचे दिखाया गया है।

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

Answer 6

वर्तमान में ऐसा करने का सबसे अच्छा तरीका यह है कि LESS कमांड लाइन कंपाइलर का उपयोग किया जाए

$ npm install -g less jshint recess uglify-js

एक बार जब आप ऐसा कर लेते हैं, तो निर्देशिका में कम फ़ोल्डर में जाएं और फिर फ़ाइल चर को संपादित करें। जब तक आपको नेविगेशन बार के रंग सहित ज़रूरत के अनुसार बहुत सारे चर नहीं बदल सकते।

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

एक बार जब आप ऐसा कर लेते हैं, तो अपने बूटस्ट्रैप डायरेक्टरी में जाएं और कमांड मेक को चलाएं।

Answer 7

यदि आप LESS का उपयोग कर रहे हैं, तो आप कम कोड के लिए मिक्सी का उपयोग कर सकते हैं। यहाँ मैं एक ढाल, सीमा और सीमा-त्रिज्या जोड़ूंगा:

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

* यदि आप रेल रत्न, ट्विटर-बूटस्ट्रैप-रेल का उपयोग कर रहे हैं, तो मैं इसे सीधे फाइल बूटस्ट्रैप_एंड_ओवरसाइड्स .css.less * में करता हूं।

Answer 8

यह वो है जो मैं करुंगा

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

यह सभी नाविक के लिए अच्छी तरह से काम करता है आप शीर्ष पर यहाँ http://caverne.fr डेमो देख सकते हैं

Answer 9

Bootstrap.css लाइन 4784 में हम देखते हैं:

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

वांछित प्रभाव प्राप्त करने के लिए आपको सभी 'पृष्ठभूमि-छवि' संपत्ति घोषणाओं को हटाने की आवश्यकता है।

Answer 10

जब तक आपको कुछ और जटिल की आवश्यकता नहीं होती है, तो यह कहना मुश्किल नहीं होगा? यह एक हैक का एक सा है, लेकिन किसी की जरूरतों के अनुरूप हो सकता है जो जल्दी ठीक करना चाहता है।

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

Answer 11

यदि आप बूटस्ट्रैप के LESS या SASS संस्करण का उपयोग कर रहे हैं। सबसे प्रभावी तरीका LESS या SASS फ़ाइल में परिवर्तनशील नाम को बदलना है।

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

यह बूटस्ट्रैप्स नवबार को बदलने का अब तक का सबसे आसान और सबसे कारगर तरीका है। आपको ओवरराइड लिखने की आवश्यकता नहीं है, और कोड साफ रहता है।

Answer 12

आप बूटस्ट्रैप आधिकारिक वेबसाइट पर अपने स्वयं के संस्करण को अनुकूलित कर सकते हैं ।

Answer 13

मैं वास्तव में साइट में किसी भी चीज़ को बदलना चाहता हूं, क्योंकि आप बूटस्ट्रैप के बाद साइट को लोड करना चाहिए, ताकि यह कक्षाओं को अधिलेखित कर दे। अब मैंने जो कुछ किया है वह मेरी छोटी बूटस्ट्रैप थीम के साथ मेरी अपनी कक्षाएं हैं। इस तरह छोटी चीजें

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

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

मैंने भी मान्यताओं की त्रुटियों को उसी तरह बदल दिया।