html - 更改 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)