如何使用自定义颜色更改引导进度条的颜色
如何使用自定义颜色更改引导进度条的颜色
提问于 2014-10-06 23:32:15
如何在不丢失文本的情况下更改引导程序进度条的颜色？我见过this answer
$('#pb').css({
'background-image': 'none',
'background-color': 'red'
});它可以工作，但我丢失了进度条中的所有文本。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-10-07 04:30:59
使用Bootstrap 3.2.0，您可以执行以下操作：
$(function() {
$("#one").addClass("progress-bar-purple");
$("#two").addClass("progress-bar-orange");
});.progress-bar-purple {
background-color: purple !important;
}
.progress-bar-orange {
background-color: orange !important;
}<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<div class="progress">
<div id="one" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="progress">
<div id="two" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
80%
</div>
</div>
Stack Overflow用户
发布于 2018-01-02 01:47:27
你能做的最简单的事情就是...
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:10%; background-color:red !important;">
</div>
</div>在进度条div中提到style=“宽度:10%；背景颜色:红色！重要；”
用任何颜色代替红色..。
Stack Overflow用户
发布于 2019-01-07 08:24:25
这两行代码直接来自Bootstrap CSS
.progress-bar {
background-color: #007bff;
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}只需在html中、<style></style>之间或在加载bootstrap.css后加载的css文件中使用它们
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26219670
复制相关文章
相似问题