बूटस्ट्रैप बटन रूपरेखा

Question

काम नहीं कर रहा है मैं बूटस्ट्रैप के लिए बहुत नया हूं, और मेरे बटन सही तरीके से स्टाइल करने में थोड़ा सा परेशानी है। मैं अपनी वेबसाइट here पर दस्तावेज के रूप में सिर्फ एक रूपरेखा के साथ एक हरा (सफलता) रंगीन बटन चाहता हूं। जब मैं <button type="button" class="btn btn-success-outline">Success</button> सुझाए गए कोड का उपयोग करता हूं, तो मुझे एक ग्रे बटन मिलता है जिसमें कोई स्पष्ट स्टाइल नहीं है which looks like this ... क्या कोई मेरी मदद कर सकता है? धन्यवाद!

Answer 1

क्या आप सुनिश्चित हैं कि बूटस्ट्रैप सीएसएस फ़ाइलें काम करती हैं? क्योंकि उस कोड में <button type="button" class="btn btn-success-outline">Success</button> यह कुछ भी निर्दिष्ट नहीं करता है लेकिन बीटीएन-सफलता-रूपरेखा (आपने जो कहा है)। आपको जांचना चाहिए कि क्या आपकी सीएसएस फ़ाइलें काम करती हैं या अन्य बूटस्ट्रैप दस्तावेज़। यह मेरे लिए काम करता है

Answer 2

यदि आपका बूटस्ट्रैप ठीक काम करता है। आप इस कोड को आजमा सकते हैं।

<button type="button" class="btn btn-success-outline">Success</button> 

plz अपने माता पिता div की जाँच करें। क्या यह div फ़्लोट सीएसएस का उपयोग करता है। यदि बीटीएन की तुलना में फ्लोट का उपयोग स्पष्ट है: दोनों;

Answer 3

मुझे एक समान समस्या है। आप सीएसएस में बस एक नियम स्थापित कर सकते हैं जो इसे होना चाहिए या 'बीटीएन-सफलता-रूपरेखा' वर्ग को ओवरराइड कर सकते हैं।

/*Bootstrap button outline override*/ 
.btn-outline { 
    background-color: transparent; 
    color: inherit; 
    transition: all .5s; 
} 

.btn-primary.btn-outline { 
    color: #428bca; 
} 

.btn-success.btn-outline { 
    color: #5cb85c; 
} 

.btn-info.btn-outline { 
    color: #5bc0de; 
} 

.btn-warning.btn-outline { 
    color: #f0ad4e; 
} 

.btn-danger.btn-outline { 
    color: #d9534f; 
} 

.btn-primary.btn-outline:hover, 
.btn-success.btn-outline:hover, 
.btn-info.btn-outline:hover, 
.btn-warning.btn-outline:hover, 
.btn-danger.btn-outline:hover { 
    color: #fff; 
} 

आप ऊपर सीएसएस के साथ पहला विकल्प, अपने html उपयोग में चुनते हैं:

<button type="button" class="btn btn-success btn-outline">success</button> 

Answer 4

FYI करें यह अब btn-outline- *

https://github.com/twbs/bootstrap/issues/17719

Answer 5

को नाम दिया गया है जिस कारण से आप काम नहीं कर रहे हैं वह यह है कि यह बीटीएन-रूपरेखा-सफलता बीटीएन-सफलता-रूपरेखा नहीं है।