बूटस्ट्रैप 4 नेवबार रंग

बूटस्ट्रैप 4 में, कैसे मैं एक नेविगेशन बार की पृष्ठभूमि का रंग बदलने के बारे में जाते हैं? Twbscolor से कोड काम नहीं करता है। मैं पृष्ठभूमि रंग को एक अलग रंग और फ़ॉन्ट रंग सफेद बनाना चाहता हूं।बूटस्ट्रैप 4 नेवबार रंग

<nav class="navbar navbar-toggleable-md navbar-light bg-danger"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Jordan Baron</a> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home</a> 
       </li> 
      </ul> 
     </div> 
    </nav>

स्रोत

2017-04-13 hiboo

मुझे लगता है कि आप 'याद कर रहे हैं नेवबार-dark' के रूप में कुछ जवाब में सुझाव दिया। Https://stackoverflow.com/a/47900899/2797254 –

अद्यतन 2018

बूटस्ट्रैप 4.0.0:

यहाँ सीएसएस कि बूटस्ट्रैप 4 में नेवबार रंग बदल जाएगा ... है

/* change the background color */ 
.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; 
}

डेमो: http://www.codeply.com/go/U9I2byZ3tS

~~भी याद रखें कि BS4 अल्फा में अब भी है तो इन कक्षाओं में बदल सकते हैं।~~ इसके अलावा, आपके मार्कअप में bg-danger समग्र पृष्ठभूमि रंग को ओवरराइड कर देगा।

अंधेरे/बोल्ड पृष्ठभूमि रंगों के लिए navbar-dark का उपयोग करें, और navbar-light का उपयोग करें यदि navbar हल्का रंग है। यह पाठ के रंग और color of the toggler icon as explained here को प्रभावित करेगा।

स्रोत

2017-04-13 01:52:21 ZimSystem

यहाँ एक और अधिक सरल तरीका नेवबार पृष्ठभूमि का रंग बदलने के लिए है।

अपने .navbar पर .navbar-dark का उपयोग करें और .bg-company-red जैसे अपने कस्टम पृष्ठभूमि रंग के लिए शैली बनाएं। .navbar-dark आपके सभी लिंक सफेद बना देगा।

एचटीएमएल

<nav class="navbar navbar-toggleable-md navbar-dark bg-company-red">

सीएसएस शैली ...

.bg-company-red { 
    background-color: darkred; 
}

स्रोत

2017-09-27 21:48:31 Chad

पर एक त्वरित कोड स्निपेट हाय! मैं अपनी सभी बाहरी सीएसएस फ़ाइलों के लिए वेबपैक का उपयोग कर रहा हूं। एक बार जब मैं बूटस्ट्रैप 4 से शैलियों को ओवरराइड करने का प्रयास करता हूं तो मुझे '! महत्वपूर्ण' नियम का उपयोग करना होगा, अन्यथा वे लागू नहीं होते हैं। V4 में अनुकूलन तंत्र बदल गया है? v3 के साथ मैं ऐसी कोई समस्या नहीं थी – Kuzma

ऐसा नहीं है कि आप बस अपने सीएसएस चयनकर्ता में अधिक विशिष्ट ताकि आप! उपयोग करने के लिए 'की जरूरत नहीं है important' जरूरत है संभव है। तो '। Special-class' के बजाय 'body> header> .special-class' आज़माएं। बूटस्ट्रैप का उपयोग कर रहे चयनकर्ता की प्रतिलिपि बनाएँ और फिर सुनिश्चित करें कि बूटस्ट्रैप शैलियों के बाद आपकी ओवरराइड शैलियों को शामिल किया गया है। – Chad

सलाह के लिए धन्यवाद! मैंने बहुत सारे संयोजनों की कोशिश की, लेकिन केवल 'महत्वपूर्ण' परिवर्तन गुण। बहुत अजीब स्थिति ... – Kuzma

-2

मुझे मिल गया। यह बहुत आसान है। कक्षा बीजी का उपयोग करके आप इसे आसानी से प्राप्त कर सकते हैं। मैं आपको दिखा दो:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

आप अपने पसंदीदा रंग बदलने के लिए चाहते हैं, तो बस शैली टैग एनएवी के भीतर का उपयोग यह आप डिफ़ॉल्ट नीले नेवबार देता है:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

स्रोत

2017-11-18 03:12:16

यदि आप बूटस्ट्रैप 4 दस्तावेज़, Color schemes पढ़ते हैं, तो यह आपके प्रश्नों का उत्तर देगा।

स्रोत

2017-12-01 11:20:24 antonjs

बूटस्ट्रैप 4 नेवबार रंग

उत्तर

संबंधित मुद्दे