如何使用自定义颜色更改引导进度条的颜色

Question

如何在不丢失文本的情况下更改Bootstrap进度条的颜色？我看到了这个答案:

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

它有效,但我在进度条中丢失了任何文本.

Answer 1

使用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>

Answer 2

你能做的最简单的事情就是...

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

提及样式=“宽度：10％；背景颜色：红色！重要；” 进度条 div

把任何颜色而不是红色...

Answer 3

这两行直接来自 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;
}

<style></style>只需在加载 bootstrap.css 后加载的html、CSS 文件之间或其中使用它们即可