बूटस्ट्रैप सीएसएस

Question

ओवरराइड करने में परेशानी मैंने बूटस्ट्रैप्स सीएसएस को ओवरराइड करने के लिए नेट की खोज की है लेकिन अभी तक यह मेरे लिए काम नहीं कर रहा है। मैं bootstrap.css फ़ाइल संपादित किए बिना डिफ़ॉल्ट navbar रंग बदलने की कोशिश कर रहा हूं।
मैं bootstrap.css लोड करने के बाद सिर में निम्नलिखित डाल की कोशिश की है:

bootstrapOverload:

.navbar-inner { 
    background-color: #006633; 
    background-image: -mox-linear-gradient(top, #006633, #006633); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)); 
    background-image: -webkit-linear-gradient(top, #006633, #006633); 
    background-image: -o-linear-gradient(top, #006633, #006633); 
    background-image: linear-gradient(to bottom, #006633, #006633); 
    border-color: #006633; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0); 
} 

यह तो मैं अपनी ही सीएसएस फ़ाइल में डालने की कोशिश की और फिर उस स्टाइलशीट लोड करने की तरह तो काम नहीं किया .css

.navbar-inner { 
    background-color: #006633; 
    background-image: -mox-linear-gradient(top, #006633, #006633); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)); 
    background-image: -webkit-linear-gradient(top, #006633, #006633); 
    background-image: -o-linear-gradient(top, #006633, #006633); 
    background-image: linear-gradient(to bottom, #006633, #006633); 
    border-color: #006633; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0); 
} 

_Layout.cshtml

<link rel="stylesheet" href="Content/bootstrap.css"> 
<link rel="stylesheet" href="Content/bootstrapOverload.css"> 

जब बात नहीं बनी मैं _Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override --> 

.navbar-override { 
    background-color: #006633; 
    background-image: -mox-linear-gradient(top, #006633, #006633); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)); 
    background-image: -webkit-linear-gradient(top, #006633, #006633); 
    background-image: -o-linear-gradient(top, #006633, #006633); 
    background-image: linear-gradient(to bottom, #006633, #006633); 
    border-color: #006633; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',  endColorstr='#ff006633', GradientType=0); 
} 

एम आई तत्व

के लिए एक कस्टम वर्ग को जोड़ने की कोशिश की bootstrapOverload.css कुछ गलत कर रहा है? मैं वास्तव में सीखना पसंद करूंगा कि यदि संभव हो तो इसे सही तरीके से कैसे करें।

Answer 1

सीएसएस को अधिभारित करने के लिए आपको बाद में कोड में होना चाहिए, या अधिक विशिष्ट तो सीएसएस जिसे आप अधिभारित करने का प्रयास कर रहे हैं।

इतना है कि यह body .navbar-inner कहा गया है सिर्फ इतना है कि यह अधिक सटीक है, या हो सकता है div.navbar-inner यह सिर्फ .navbar-inner के सामने body जोड़ने के लिए संभव हो सकता है, सबसे अच्छा वहाँ कहीं एक आईडी के लिए किया जाएगा।

यदि आप bootstrap.css में विशिष्ट के रूप में इसे चुन रहे हैं, तो मुझे लगता है कि बूटस्ट्रैप के बाद आपको सीएसएस लोड नहीं किया गया है। सत्यापित करें कि क्रोमस डेवलपमेंट टूल या फ़ायरफ़ॉक्स के फ़ायरबग जैसे टूल के साथ क्या चुना गया है।

Answer 2

अपने सीएसएस लिखने में कोई गलती नहीं है:

background-image: -mox-linear-gradient(top, #006633, #006633); 

मुझे लगता है कि यह होना चाहिए:

background-image: -moz-linear-gradient(top, #006633, #006633); 

आप सीएसएस में गलती लिखते हैं, तो अपने स्टॉप बाकी की व्याख्या है, तो के लिए कोई ओवरराइड आप।

Answer 3

बस नेवबार रंग बदलने के लिए कोशिश कर दिन के सबसे बिताया: [

मुझे लगता है कि समस्या .navbar-उल्टा होता है

आपका अलग .css फ़ाइल कुछ इस तरह शामिल तो रंग बदल जाएगा चाहिए :

.navbar-inverse .navbar-inner { 
background-color: #586214; 
background-image: none; 
} 

Answer 4

आप कम चर बदलकर बूटस्ट्रैप डिफ़ॉल्ट को ओवरराइड कर सकते हैं।

http://bootstrap.lesscss.ru/less.html

// नेवबार

• @navbarBackground: @ रंग 1;
• @navbarBackground हाइलाइट: @ रंग 1;
• @navbarbrandColor: #FFFFFF;
• @navbarLinkcolor: #FFFFFF;
• @navbarLinkColorHover: #FFFFFF;
• @navbarLinkColorActive: #FFFFFF;
• @navbarInverseBackground: #FFFFFF;
• @navbarInverseBackground हाइलाइट: # एफएफएफएफएफएफ;
• @navbarInverseBorder: #FFFFFF;
• @navbarInverseLinkColorHover: @ Color7;
• @navbarInverseLinkColorActive: @ Color11;
• @navbarInverseLinkColor: @ Color1;

Answer 5

क्या आपने बूटस्ट्रैप को ओवरराइड करने के लिए तत्व को बताने के लिए प्रत्येक सीएसएस लाइन पर !important टैग जोड़ने का प्रयास किया है?

कुछ इस तरह:

.navbar-override { 
    background-color: #006633 !important; 
    background-image: -moz-linear-gradient(top, #006633, #006633) !important; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)) !important; 
    background-image: -webkit-linear-gradient(top, #006633, #006633) !important; 
    background-image: -o-linear-gradient(top, #006633, #006633) !important; 
    background-image: linear-gradient(to bottom, #006633, #006633) !important; 
    border-color: #006633 !important; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',  endColorstr='#ff006633', GradientType=0) !important; 
} 

नहीं

आमतौर पर सबसे अच्छा तरीका यह करने के लिए है, लेकिन मुझे लगता है कि यह काम करना चाहिए।

Answer 6

सीएसएस-क्लास की प्रतिलिपि बनाकर और अपनी नाम बदलकर अपनी समस्या हल करें।

.drop-down {...}  /* is from bootstrap */ 
.drop-down-new {...} /* Your new Class that works*/