如何在运行时更改引导程序(twitter)进度条的颜色

时间:2012-03-31 02:21:35

标签: javascript css twitter-bootstrap

我正在使用此进度条:

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

并且想要给它一种自定义颜色,仅在运行时才知道 (所以在css或更少的文件中硬编码不是一个选项)

我试过这个:

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

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

没有成功。

4 个答案:

答案 0 :(得分:32)

您的代码实际上正在运行,只是进度条实际上使用渐变作为颜色而不是实体background-color属性。要更改背景颜色,请将background-image设置为none,您的颜色将被选中:

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

答案 1 :(得分:5)

现在有一个bootstrap 3.2进度条设计器工具。

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

答案 2 :(得分:4)

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

使用红色的.progress-danger示例:

<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/

希望它有所帮助。

答案 3 :(得分: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/