कैसे क्रम

Question

पर एक बूटस्ट्रैप (चहचहाना) प्रगति बार का रंग बदलने के मैं इस प्रगति बार उपयोग कर रहा हूँ:

http://twitter.github.com/bootstrap/components.html#progress

और यह एक कस्टम रंग, केवल क्रम में जाना जाता देना चाहते हैं (

<div class="progress"> 
    <div id='pb' class="bar" style="width: 80%"></div> 
</div> 

<script> 
    $('#pb').css({'background-color': "red"}) 
</script> 

सफलता के बिना

: तो सीएसएस या उससे कम फ़ाइल में हार्डकोड एक विकल्प)

मैं इस की कोशिश की है नहीं है।

Answer 1

आपको रंग बदलने के लिए में कंटेनर div class बदलना चाहिए।

उदाहरण लाल रंग के लिए .progress-खतरे का उपयोग कर:

<div class="progress progress-danger"> 
    <div class="bar" style="width: 60%;"></div> 
</div> 

अधिक रंग (बस वर्ग के नाम में प्रगति के लिए विकल्प बटन)। http://twitter.github.com/bootstrap/base-css.html#buttons

अद्यतन: जावास्क्रिप्ट के साथ कार्यावधि में वर्ग के नाम जोड़ने के लिए http://snipplr.com/view/2181/ या http://api.jquery.com/addClass/ पर एक नज़र डालें यदि आप jQuery का उपयोग कर रहे आदेश में।

उम्मीद है कि यह मदद करता है।

Answer 2

आपका कोड वास्तव में काम कर रहा है, सिर्फ इतना है कि प्रगति बार वास्तव में एक रंग के बजाय एक ठोस background-color संपत्ति के रूप में एक ढाल का उपयोग कर रहा है। आदेश पृष्ठभूमि का रंग बदलने के लिए, none को background-image स्थापित करने और अपने रंग उठाया जा जाएगा:

$('#pb').css({ 
    'background-image': 'none', 
    'background-color': 'red' 
}); 

Answer 3

आप रनटाइम पर एक दूसरे में रंग बदलने के लिए कैसे मतलब है?

मैं केवल आप कर के रूप में आप सही होने के रूप में किसी को भी चिह्नित नहीं किया है कल्पना कर सकते हैं। मामले आप इसका मतलब यह प्रयास करना चाहिए, तो

jQuery(document).ready(function(){ 
    window.percent = 0; 
    window.progressInterval = window.setInterval(function(){ 
     if(window.percent < 100) { 
      window.percent++; 
      jQuery('.progress').addClass('progress-striped').addClass('active'); 
      jQuery('.progress .bar:first').removeClass().addClass('bar') 
      .addClass ((percent < 40) ? 'bar-danger' : ((percent < 80) ? 'bar-warning' : 'bar-success')) ; 
      jQuery('.progress .bar:first').width(window.percent+'%'); 
      jQuery('.progress .bar:first').text(window.percent+'%'); 
     } else { 
      window.clearInterval(window.progressInterval); 
      jQuery('.progress').removeClass('progress-striped').removeClass('active'); 
      jQuery('.progress .bar:first').text('Done!'); 
     } 
    }, 100); 
}); 

http://jsfiddle.net/LewisCowles1986/U9xw6/

Answer 4

अब एक बूटस्ट्रैप 3.2 प्रगति बार है यह बहुत ही कम से कम jsFiddle

एचटीएमएल पर एक नज़र

<div class="progress"> 
    <div class="bar bar-success" style="width: 0%; opacity: 1;"></div> 
</div> 

जे एस है डिजाइनर उपकरण।

http://bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer/