CSS 如何使用自定义颜色更改引导程序进度条的颜色

How can I change color of bootstrap progress bar with custom color

提问by gath

How can I change the color of a Bootstrap progress bar without losing the text? I have seen this answer:

如何在不丢失文本的情况下更改 Bootstrap 进度条的颜色？我看过这个答案：

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

It works, but I lose any text in the progress bar.

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

回答by mccannf

Using Bootstrap 3.2.0, you can do something like the following:

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

回答by Devashish Prasad

Simplest thing you can do is...

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

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

mention style="width:10%; background-color:red !important;" in progress-bar div

提及样式=“宽度：10％；背景颜色：红色！重要；” 进度条 div

put any color instead of red...

把任何颜色而不是红色...

回答by Stephan

These two lines are directly from the Bootstrap CSS

这两行直接来自 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;
}

Simply use these in your html, between <style></style>or in a css-file that you load after you load bootstrap.css

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

回答by sr_luis

It is possible that bootstrap in the year in which the question was asked was different, but now you have the possibility to add bootstrap classes that provide the color.

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

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

There are a variety of colors which you can find here, and you will find colors for the text and for the background.

您可以在此处找到多种颜色，您可以找到文本和背景的颜色。

回答by rolando

If you are using bootstrap sass, it has a mixin that you can include like this:

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

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