ट्विटर बूटस्ट्रैप - सबक्लास

Question

में ग्रेडिएंट मिक्सीन को कैसे हटाया जाए, मैं अपने कस्टम थीम में .navbar-inner subclass करना चाहता हूं, लेकिन मैं ढाल अक्षम करने के लिए एक गैर-हैकिश तरीका नहीं ढूंढ सकता (दोनों ग्रेडियेंट रंगों को एक ही रंग में सेट करने के अलावा जो गंदे लगता है)। किसी भी विचार से मैं एक subclass से एक मिश्रण में ओवरराइड (अक्षम) कैसे कम कर सकते हैं ??

Answer 1

यही है कि आपको सीएसएस में प्राप्त करने की आवश्यकता है ताकि ढाल को अक्षम करने के लिए ओवरराइड किया जा सके।

सीएसएस:

.navbar-inner { 
    background-color: #2c2c2c; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-repeat: no-repeat; 
    filter: none; 
} 

background-image: none; है सभी विक्रेता उपसर्गों ओवरराइड करने के लिए कई बार इस्तेमाल किया जा रहा।

Answer 2

एस.ए.एस.एस. कोड के लिए: मैं पृष्ठभूमि रंग कहा: पारदर्शी और एक mixin

@mixin override_gradient_vertical() { 
    background-color:transparent; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-image: none; 
    background-repeat: no-repeat; 
    filter: none; 
} 

अब में ले जाया गया तो आप सिर्फ उपयोग कर सकते हैं समाधान के लिए

@include override_gradient_vertical(); 

Answer 3

धन्यवाद । बस साझा करने मैं क्या आया के साथ जवाब को पढ़ने के बाद:

यह एससीएसएस मैं एक साधारण ढाल दूर करने के लिए उपयोग कर रहा हूँ है:

@mixin remove_gradient($color:transparent) { 
    background-color:$color; 
    background-image: none; 
    background-repeat: no-repeat; 
    filter: none; 
} 

ध्यान दें कि आप mixin करने के लिए एक रंग पारित कर सकते हैं (की जरूरत थी

@include remove_gradient(white); 

या यह पारदर्शी के लिए डिफ़ॉल्ट करते हैं:: क्या इसके लायक के लिए

@include remove_gradient(); 

Answer 4

मेरे मामले पर) यहां एक कम कार्यान्वयन है। बूटस्ट्रैप फ़ाइलें

#gradient{ 
    .remove(@color: transparent) { 
     background-color:@color; 
     background-image: none; 
     background-repeat: no-repeat; 
     filter: none; 
    } 
} 

Answer 5

ढाल bootstrap_theme फ़ाइल द्वारा जोड़ा जाता है mixin.less।

मुझे वास्तव में इतनी पृष्ठभूमि-छवि होने का विचार पसंद नहीं आया। तो मेरी समाधान है अगर आप, एस.ए.एस.एस. या बूटस्ट्रैप की कम संस्करण उपयोग कर रहे बस निम्नलिखित लाइनों

.navbar-default { 
    @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg); 
    @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered 
    border-radius: $navbar-border-radius; 
    $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); 
    @include box-shadow($shadow); 

    .navbar-nav > .active > a { 
    @include gradient-vertical($start-color: darken($navbar-default-bg, 5%), $end-color: darken($navbar-default-bg, 2%)); 
    @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); 
    } 
} 

से _theme.scss

में मूल रूप से उपस्थित द्वारा ढाल ओवरराइड

.navbar-default { 
    @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg); 
    @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered 

    $shadow: inset 0 0px 0 rgba(255,255,255,.15), 0 0px 0px rgba(0,0,0,.075); 
    @include box-shadow($shadow); 

    .navbar-nav > .active > a { 
    @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg); 
    @include box-shadow(inset 0 0px 0px rgba(0,0,0,.075)); 
    } 
} 

करने के लिए आप के रूप में देख सकते हैं, प्रारंभ और अंत बिंदु एक ही मूल्य हैं, इस प्रकार हम कभी भी ढाल प्रभाव नहीं देखेंगे। सरल और साफ।