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>

Answer 3

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

getsizeof

Answer 4

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

class="progress-bar-success"

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

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

更改bootstrap进度栏背景（不是栏，但栏背景）

4 个答案: