Làm thế nào để thay đổi màu sắc của một bootstrap (twitter) thanh tiến trình trong thời gian chạy

Question

Tôi đang sử dụng thanh tiến trình này:

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

Và muốn để cho nó một màu tùy chỉnh, chỉ được biết đến trong thời gian chạy (nên hardcoding nó trong css hoặc ít hơn tập tin không phải là một lựa chọn)

tôi đã thử này:

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

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

không thành công.

Answer 1

Bạn nên thay đổi lớp div vùng chứa để thay đổi màu.

Ví dụ sử dụng .progress-nguy hiểm cho màu đỏ:

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

Nhiều màu sắc (chỉ nút thay thế cho sự tiến bộ trong tên lớp). http://twitter.github.com/bootstrap/base-css.html#buttons

Cập nhật: Để thêm tên lớp trong thời gian chạy với javascript hãy nhìn vào http://snipplr.com/view/2181/ hoặc http://api.jquery.com/addClass/ nếu bạn đang sử dụng jQuery.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Mã của bạn thực sự hoạt động, chỉ cần thanh tiến trình thực sự sử dụng độ dốc làm màu thay vì thuộc tính solid background-color. Để thay đổi màu nền, thiết lập background-image để none và màu sắc của bạn sẽ được nhặt:

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

Answer 3

Bạn có nghĩa là làm thế nào để thay đổi màu sắc vào nhau trong thời gian chạy?

Tôi chỉ có thể tưởng tượng bạn làm như bạn chưa đánh dấu bất kỳ ai là chính xác. Trong trường hợp bạn làm có ý nghĩa này, sau đó có một cái nhìn tại jsFiddle này rất tối thiểu

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

Hiện nay, một thanh 3.2 tiến bootstrap công cụ thiết kế.

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