Wie die Farbe eines Bootstrap (twitter) Fortschrittsbalken zur Laufzeit dieses Fortschrittsbalken

Question

Ich verwende ändern:

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

und möchte ihm eine eigene Farbe geben, nur zur Laufzeit bekannt (so hartzucodieren es in der CSS-Datei oder weniger ist keine Option)

ich das versucht:

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

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

ohne Erfolg.

Answer 1

Sie sollten die Container-Div-Klasse ändern, um die Farbe zu ändern.

Beispiel .progress-Gefahr für die rote Farbe mit:

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

Mehr Farben (nur Ersatz-Taste für den Fortschritt im Namen der Klasse). http://twitter.github.com/bootstrap/base-css.html#buttons

Update: Um die Klassennamen zur Laufzeit mit Javascript einen Blick auf http://snipplr.com/view/2181/ oder http://api.jquery.com/addClass/ hinzufügen, wenn Sie jQuery verwenden.

Ich hoffe, es hilft.

Answer 2

Ihr Code funktioniert tatsächlich, nur dass der Fortschrittsbalken tatsächlich einen Farbverlauf anstelle einer soliden background-color Eigenschaft verwendet. Um die Hintergrundfarbe zu ändern, stellen Sie den background-image zu none und Ihre Farbe wird abgeholt werden:

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

Answer 3

Meinen Sie, wie die Farben zur Laufzeit ineinander ändern?

Ich kann mir nur vorstellen, dass Sie tun, wie Sie niemanden als richtig markiert haben. Im Fall, dass Sie dies tun bedeuten, haben dann einen Blick auf diese sehr minimal jsFiddle

HTML

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

JS

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

Es gibt jetzt eine Bootstrap 3.2 Fortschrittsbalken Designerwerkzeug.

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