Jak zmienić barwę bootstrap (twitter) pasek postępu przy starcie

Question

Używam tego pasek postępu:

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

i chciałby, aby nadać mu kolor niestandardowy, znany tylko w czasie wykonywania (tak sztywno go w pliku css lub mniej nie jest opcją)

próbowałem to:

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

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

bez powodzenia.

Answer 1

Należy zmienić klasę div kontenera, aby zmienić kolor.

Przykład wykorzystania .progress-zagrożenie dla koloru czerwonego:

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

więcej kolorów (tylko substytutem przycisk postępu w nazwie klasy). http://twitter.github.com/bootstrap/base-css.html#buttons

Aktualizacja: Aby dodać nazwę klasy w czasie wykonywania z javascript przyjrzeć http://snipplr.com/view/2181/ lub http://api.jquery.com/addClass/ jeśli używasz jQuery.

Mam nadzieję, że to pomaga.

Answer 2

Twój kod faktycznie działa, tylko że pasek postępu jest rzeczywiście stosując gradient jako kolor zamiast solidnej background-color nieruchomości. Aby zmienić kolor tła, ustaw background-image do none a kolor będzie podniósł:

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

Answer 3

Czy to znaczy, jak zmienić kolory do siebie w czasie wykonywania?

Mogę sobie tylko wyobrazić, że robisz tak, jak nie oznaczałeś nikogo jako poprawnego. W przypadku, gdy nie znaczy to, następnie przyjrzeć się tej bardzo minimalnym 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

Istnieje obecnie bootstrap bar 3,2 postęp narzędzie projektanta.

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