更改引导进度条背景（不是进度条，而是条形背景）答案

【问题标题】：change bootstrap progress bar background (not the bar, but the bars Background)更改引导进度条背景（不是进度条，而是条形背景）
【发布时间】：2014-06-02 03:47:56
【问题描述】：

目前我正在使用引导进度条

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

栏的默认颜色是蓝色，我已经设法改变了这一点。

但是，未填充部分的默认背景是带有灰色辐射的白色，我怎样才能将其更改为我自己的颜色？

【问题讨论】：

标签： html css twitter-bootstrap background progress-bar

【解决方案1】：

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

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

这将移除进度条其余部分的阴影，并将其更改为（在本例中）浅灰色。您可以在那里选择您喜欢的任何颜色值。

这可以放在 HTML 本身中（通常不是首选），也可以放在您自己的 CSS 文件中（只要确保它包含在 Bootstrap CSS 之后）。

（一个快速的 Plunkr 来说明：http://plnkr.co/edit/WUDuq5XayN0nXEmtXY6V）

【讨论】：

它似乎不起作用，它改变了背后的颜色。我将其更改为黑色，您几乎可以看到条形图和未着色条形图后面的背景层发生了变化。
您是否在整体上操纵 Bootstrap 主题？确实，进度类将位于实际进度条的后面，但默认的 Bootstrap 使进度条与容器的大小相同，因此它在视觉上胜出。如果你有一些 Bootstrap 主题，那可能会改变高度并允许 .progress 在栏后面窥视。
抱歉，您所说的整体主题是什么意思？我使用的 CSS 是：
我的意思是如果你抓住一些“免费的 Bootstrap 主题”并将其应用到你的网站上。看起来不像你做的，所以你没事。（虽然，您不需要 .min.css 和 bootstrap.css 文件。只需要一个或另一个。）您能提供您所看到的屏幕截图吗？
图片已添加 :) 啊，是的，我两者都有，因为我开始编辑我拥有的引导文件，然后它变得过时了，所以得到了在线链接。 Hoever 需要慢慢删除目录，然后重新进行引导操作。

【解决方案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>

【讨论】：

这在使用进度条内的文本状态时有很大帮助 - 当进度条很短时，默认文本在默认背景颜色下是不可读的。

【解决方案3】：

您可以简单地执行此操作。内联或单独的 css 文件。

 <div class="progress" style="height:20px; border-radius: 0; background-color: #ffaab2;">
      <div class="progress-bar" style="width:80%;height:20px; background-color: #ff5262">
      </div>
    </div>

【讨论】：

【解决方案4】：

你必须使用上下文类。添加这样的课程可以解决您的问题：

class="progress-bar-success"

为了使用其他颜色，您可以通过以下方式更改“成功”：

信息：浅蓝色
危险：红色
警告：橙色

【讨论】：