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

【问题标题】：How can I change color of bootstrap progress bar with custom color如何使用自定义颜色更改引导进度条的颜色
【发布时间】：2014-10-06 15:32:15
【问题描述】：

如何在不丢失文本的情况下更改 Bootstrap 进度条的颜色？我见过this answer：

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

它有效，但我丢失了进度栏中的任何文本。

【问题讨论】：

你使用的是什么版本的 Twitter Bootstrap？在 v3.2.0 中不再有背景图像，因此您只需更改背景颜色即可。你有没有办法看看那个文本是如何消失的？

标签： css twitter-bootstrap-3

【解决方案1】：

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

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

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

提及 style="width:10%; background-color:red !important;"进度条 div

用任何颜色代替红色...

【讨论】：

为我工作而不需要 !important。

【解决方案3】：

这两行直接来自 Bootstrap CSS

.progress-bar {
    background-color: #007bff;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

只需在 html 中、<style></style> 之间或在加载 bootstrap.css 后加载的 css 文件中使用这些

【讨论】：

【解决方案4】：

如果你使用的是 bootstrap sass，它有一个 mixin，你可以像这样包含：

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

【讨论】：

【解决方案5】：

在提出问题的那一年，引导程序可能有所不同，但现在您可以添加提供颜色的引导程序类。

.progress{
    margin:10px;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Normal -->
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Striped -->
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Animated stripes -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

有多种颜色你can find here，你将为文本和背景找到颜色。

【讨论】：