बूटस्ट्रैप के पैनल शीर्षक पृष्ठभूमि रंग को ओवरराइड कैसे करें?

मैं Bootstrap से एक पैनल का उपयोग कर रहा हूं हालांकि शीर्षक के लिए मैं शीर्षक के लिए अपने स्वयं के पृष्ठभूमि रंग का उपयोग करना चाहता हूं। जब मैं div के लिए panel-heading कक्षा नहीं डालता, तो लेआउट खराब हो जाता है। इसलिए मैंने सोचा कि मुझे panel-heading रखना चाहिए लेकिन फिर पृष्ठभूमि रंग को ओवरराइड करने का एक तरीका खोजें। तो मैंने एक कस्टम सीएसएस वर्ग बनाने और background-color का उपयोग करने का निर्णय लिया और फिर इसे panel-heading के साथ div में जोड़ें। लेकिन इससे कोई प्रभाव नहीं पड़ा।बूटस्ट्रैप के पैनल शीर्षक पृष्ठभूमि रंग को ओवरराइड कैसे करें?

कोई विचार पैनल के शीर्षक रंग को ओवरराइड करने का तरीका है?

कोड:

<div class="panel panel-default"> 
    <div class="panel-heading custom_class" > 
    </div> 
</div>

स्रोत

2014-10-22 Jack Twain

संभालने हूँ custom_class पैनल का रंग शीर्षक ओवरराइड करने के लिए अपनी कक्षा होने के लिए। बस जोड़ें! इसके लिए महत्वपूर्ण है या इनलाइन शैलियों या आईडी जोड़ें और शैलियों को जोड़ें क्योंकि उनके पास कक्षा जोड़े गए शैलियों पर अधिक विशिष्टता होगी। !

साथ
महत्वपूर्ण

.custom_class { पृष्ठभूमि रंग: लाल महत्वपूर्ण; }
साथ
महत्वपूर्ण
आईडी के साथ
:

#custom_id { पृष्ठभूमि रंग: लाल; }

-साथ इनलाइन शैलियों:

<div id="custom_id" class="panel panel-default"> 
     <div class="panel-heading custom_class" style="background-color:red"> 
     </div> 
    </div>

स्रोत

2014-10-22 10:16:02 invinciblejai

उन लोगों में से कोई भी काम नहीं किया –

@AlexTwain आप इसके लिए एक पहेली बना सकते हैं, यह सहायक होगा। – invinciblejai

आप अपने पैनल शीर्षक के लिए एक कस्टम वर्ग बना सकते हैं। इस सीएसएस वर्ग का उपयोग करके आप पैनल शीर्षक को स्टाइल कर सकते हैं। इसके लिए मेरे पास एक साधारण पहेली है।

HTML:

<div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
</div>

सीएसएस:

.panel-default > .panel-heading-custom { 
background: #ff0000; color: #fff; }

डेमो लिंक:

http://jsfiddle.net/kiranvarthi/t1Lq966k/

स्रोत

2014-10-22 12:03:29

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

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

यह काम करना चाहिए:

.panel > .panel-heading { 
    background-image: none; 
    background-color: red; 
    color: white; 

}

स्रोत

2015-02-07 21:19:35 Marco

+25

बस यहां पर ठोकर खाने वाले लोगों की स्पष्ट रूप से सहायता करने के लिए, आप पृष्ठभूमि-रंग को तब तक सेट नहीं कर सकते जब तक आप पृष्ठभूमि-छवि को हटा नहीं देते। –

पृष्ठभूमि-छवि पृष्ठभूमि-रंग को कवर करती है, भले ही आपने पृष्ठभूमि-रंग सेट किया हो, फिर भी आप इसे नहीं देख सकते हैं। –

-3

बस बूटस्ट्रैप की जांच करें। सीएसएस और कक्षा पैनल-शीर्षक के लिए खोज करें और डिफ़ॉल्ट कोड कॉपी करें।

डिफ़ॉल्ट सीएसएस को अपने व्यक्तिगत सीएसएस पर कॉपी करें, लेकिन उदाहरण के लिए इसे मेरे पैनल-हेडर जैसे एक दुविधा वर्ग नाम दें।

बनाए गए नए क्लोन वर्ग से सीएसएस कोड संपादित करें।

स्रोत

2015-04-15 21:52:51

-3

उपयोग करें:

.panel-heading { 
    background-color: #ececb0 !important; 
}

स्रोत

2015-10-10 14:06:21 user3197818

कैसे अपना स्वयं का कस्टम पैनल वर्ग बनाने के बारे में? इस तरह आपको बूटस्ट्रैप को ओवरराइड करने की चिंता करने की आवश्यकता नहीं होगी।

एचटीएमएल

<div class="panel panel-custom-horrible-red"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
</div>

सीएसएस

.panel-custom-horrible-red { 
    border-color: #ff0000; 
} 
.panel-custom-horrible-red > .panel-heading { 
    background: #ff0000; 
    color: #ffffff; 
    border-color: #ff0000; 
}

फिडल:https://jsfiddle.net/x05f4crg/1/

स्रोत

2016-02-17 21:47:03

बूटस्ट्रैप कभी कभी प्रासंगिक वर्ग निर्माणों का उपयोग करता है। स्टाइल बदलने के लिए आपको यही लक्ष्य रखना चाहिए।

आपको किरण वर्ती के उत्तर में सुझाए गए अनुसार अपनी खुद की कस्टम कक्षा बनाने की आवश्यकता नहीं है।

तो आप केवल जरूरत है:

सीएसएस:

.panel-default > .panel-heading { 
    background: #black; 
}

HTML:

<div class="panel panel-default">

स्पष्टीकरण here। प्रासंगिक वर्ग खंड here भी देखें।

नौसेना-उलटा उपयोग # 222 से मेल खाने के लिए। वी 3 में पैनल-इनवर्क्स requested था, लेकिन बड़ी प्राथमिकताओं के कारण खारिज कर दिया गया।

आप उस शीर्षक ओवरराइड में अग्रभूमि रंग बदल सकते हैं या आप इसे पैनल शीर्षक के लिए अलग से कर सकते हैं। निर्भर करता है कि आप क्या हासिल करने की कोशिश कर रहे हैं।

.panel-title { 
    color: white; 
}

स्रोत

2016-08-22 19:59:13 rmcsharry

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

उदाहरण:

स्रोत

2016-12-12 20:43:31

आप बस एक आईडी गुण पैनल के लिए जोड़ सकते हैं। इस

<div class="panel-heading" id="mypanelId">Hello world </div>

फिर अपने कस्टम सीएसएस फ़ाइल में
तरह:

#mypanelId{ 
    background-image: none; 
    background: rgba(22, 20, 100, 0.8); 
    color: white; 
    }

स्रोत

2017-05-23 23:47:01 NetEmmanuel

.panel-default >.panel-heading 
{ 
    background: #ffffff; 
}

यह वही काम किया मुझे सफेद करने के लिए रंग बदलने के लिए के लिए है।

स्रोत

2017-09-29 21:10:18

बूटस्ट्रैप के पैनल शीर्षक पृष्ठभूमि रंग को ओवरराइड कैसे करें?

उत्तर

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