2012-03-31 62 views

回答

4

您应该更改容器div类以更改颜色。

实施例使用.progress-危险为红色:

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

更多颜色(只是在类名进展替代按钮)。 http://twitter.github.com/bootstrap/base-css.html#buttons

更新: 为了在运行时添加类的名称使用JavaScript,如果你使用jQuery在http://snipplr.com/view/2181/http://api.jquery.com/addClass/看一看。

希望它有帮助。

+0

请考虑为了不成为未来的链接无用的答案编辑你的答案。 – 2016-11-13 02:50:03

+0

嗨Leandro。我的观点是:“不要在你的js中搞乱颜色,你可以将元素类改为进度 - 不管这是由bootstrap提供的预定义类。我确定有很多问题可以解释如何在运行时更改元素上的css类。如果你喜欢剪切和粘贴看看其他答案。 – 2016-11-13 05:25:55

+0

感谢您的回复。实际上,我问你的是SO中的一个等级规则。 – 2016-11-13 18:52:24

33

您的代码实际上正在工作,只是进度条实际上使用渐变作为颜色,而不是实体background-color属性。为了改变背景颜色,设置background-imagenone和你的颜色将有所回升:

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

谢谢,这工作。 – 2012-03-31 16:40:57

+0

@MaxL。我很高兴:)如果答案是令人满意的,请勾选您选择的答案旁边的绿色复选标记以标记问题。 – 2012-03-31 16:48:48

2

你的意思是如何改变颜色为在运行时彼此?

我只能想象你这样做,因为你没有标记任何人是正确的。在你的意思是这样的话,那么看看这个很小的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/

+0

哇,我喜欢这个! – 2013-05-07 13:40:46