更改bootstrap进度栏背景(不是栏,但栏背景)

Question

目前我正在使用bootstrap进度条

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
 </div>
</div>

栏的默认颜色是蓝色,我已设法更改此项.

但是,未填充部分的默认背景是带灰色辐射的白色,如何将其更改为我自己的颜色？

Answer 1

您只需要使用自己的CSS覆盖.progress上的值.

.progress {
  background-color: #aaa;
  -webkit-box-shadow: none;
  box-shadow: none;
}

这将删除进度条其余部分的阴影,并将其更改为(在这种情况下)温和的灰色.您可以选择您喜欢的任何颜色值.

这可以放在HTML本身(通常不是首选),也可以放在你自己的CSS文件中(只需确保它包含在Bootstrap CSS之后).

(一个快速的Plunkr来说明:http://plnkr.co/edit/WUDuq5XayN0nXEmtXY6V )

Answer 2

您只需要在进度上添加背景颜色以围绕条形:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress bg-warning">
 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
 </div>
</div>