बूटस्ट्रैप पैनल फ़ूटर रंग को कैसे बदलें

Question

मेरे पास बूटस्ट्रैप पैनल है, और मैं अपने शीर्षलेख की तरह पाद लेख रंग बदलना चाहता हूं। मैंने panel-primarypanel-footer कक्षा के बगल में जोड़ा, लेकिन केवल प्राथमिक रूपरेखा रंग जो प्राथमिक रंग में बदल दिया गया है। तो, मैं पैनल फूटर का रंग कैसे बदल सकता हूं?

कोड:

<div class="panel panel-primary"> 
    <div class="panel-heading">     
      Panel Heading 
    </div><!--.panel-heading--> 

    <div class="panel-body"> 
      Panel Body 
    </div><!--.panel-body--> 

    <div class="panel-footer panel-primary"> 
      Panel Footer 
     </div><!--.panel-footer--> 
</div> 

Answer 1

आप पैनल फुट वर्ग के लिए लागू करने के लिए एक कस्टम वर्ग बनाने के लिए:

ध्यान दें कि पैनल पाद जब प्रासंगिक विविधताओं का उपयोग के रूप में वे में होने की नहीं होती हैं नहीं इनहेरिट रंग और सीमाओं करना अग्रभूमि docs देखें।

.panel-footer.panel-custom { 
 
    background: red; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading">Panel Heading</div> 
 
    <!--.panel-heading--> 
 
    <div class="panel-body">Panel Body</div> 
 
    <!--.panel-body--> 
 
    <div class="panel-footer panel-custom">Panel Footer</div> 
 
    <!--.panel-footer--> 
 
</div>

Answer 2

शायद आप इन पैनलों के लिए सीएसएस दिखा सकते हैं?

ऐसा इसलिए है क्योंकि "पैनल-प्राथमिक" टैग पर एक और सीएसएस टैग की प्राथमिकता है। आप इसे ओवरराइट करने के लिए फ़ायरफ़ॉक्स/क्रोम में वेब-डेवलपर टूल का उपयोग करने का प्रयास कर सकते हैं।

Answer 3

आपको लगता है कि प्राप्त करने के लिए उचित सीएसएस बदलना होगा। Bootatrap 3 के लिए

चूक कर रहे हैं:

.panel-footer { 
    padding: 10px 15px; 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
    border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
} 

आप इस शैली ओवरराइड कर सकते हैं (आप नहीं बूटस्ट्रैप सीएसएस की संरचना की वजह से, panel-footer करने के लिए panel-primary वर्ग जोड़ना चाहिए)।

Answer 4

इस चेक आउट:

सीएसएस

.panel-footer{ 
    background-color:#337ab7; 
    border-color: #337ab7; 
    color: #FFFFFF; 

} 

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

jsfiddle