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

How can I change the color of bootstrap progress bar without losing text? I have seen this answer;

如何在不丢失文本的情况下更改引导进度条的颜色?我看到了这个答案;

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

from here

it works, but I lose text in the progress bar!

它有效,但我在进度条中丢失了文字!

Help Gath

3 个解决方案

#1

Using Bootstrap 3.2.0, you can do something like the following:

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

#2

Simplest thing you can do is...

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

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

mention style="width:10%; background-color:red !important;" in progress-bar div

提到style =“width:10%; background-color:red!important;”在进步栏div

put any color instead of red...

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

#3

If you are using bootstrap sass, it has a mixin that you can include like this:

如果你使用bootstrap sass,它有一个mixin,你可以包括这样:

.progress {
  @include progress-bar-variant(#000);
}

#1