[英]How to change the color of a bootstrap (twitter) progress bar at runtime
I am using this progress bar : 我正在使用此进度条:
http://twitter.github.com/bootstrap/components.html#progress http://twitter.github.com/bootstrap/components.html#progress
And would like to give it a custom color, known only at runtime (so hardcoding it in the css or less file is not an option) 并且想给它一个自定义颜色,只在运行时知道(所以在css或更少的文件中硬编码不是一个选项)
I have tried this : 我试过这个:
<div class="progress">
<div id='pb' class="bar" style="width: 80%"></div>
</div>
<script>
$('#pb').css({'background-color': "red"})
</script>
without success. 没有成功。
Your code is actually working, just that the progress bar is actually using a gradient as a color instead of a solid background-color
property. 您的代码实际上正在工作,只是进度条实际上使用渐变作为颜色而不是纯色background-color
属性。 In order to change the background color, set the background-image
to none
and your color will be picked up: 要更改背景颜色,请将background-image
设置为none
然后拾取您的颜色:
$('#pb').css({
'background-image': 'none',
'background-color': 'red'
});
There is now a bootstrap 3.2 progress bar designer tool. 现在有一个bootstrap 3.2进度条设计器工具。
http://bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer/ http://bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer/
You should change the container div class in order to change the color. 您应该更改容器div类以更改颜色。
Example using .progress-danger for red color: 使用.progress-danger进行红色的示例:
<div class="progress progress-danger">
<div class="bar" style="width: 60%;"></div>
</div>
More colors (just substitute button for progress in the class name). 更多颜色(只需替换类名称中的进度按钮)。 http://twitter.github.com/bootstrap/base-css.html#buttons http://twitter.github.com/bootstrap/base-css.html#buttons
Update: In order to add the class name at runtime with javascript take a look at http://snipplr.com/view/2181/ or http://api.jquery.com/addClass/ if you are using jQuery. 更新:为了在运行时使用javascript添加类名,请查看http://snipplr.com/view/2181/或http://api.jquery.com/addClass/,如果您使用的是jQuery。
Hope it helps. 希望能帮助到你。
Do you mean how to change the colours into one another at runtime? 你的意思是如何在运行时将颜色改变为另一种颜色?
I can only imagine you do as you have not marked anyone as being correct. 我只能想象你这样做,因为你没有标记任何人是正确的。 In the case you do mean this, then have a look at this very minimal jsFiddle 如果你的意思是这个,那么看看这个非常小的jsFiddle
HTML HTML
<div class="progress">
<div class="bar bar-success" style="width: 0%; opacity: 1;"></div>
</div>
JS 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/ http://jsfiddle.net/LewisCowles1986/U9xw6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.