如何使用自定义颜色更改引导程序进度条的颜色 [英] How can I change color of bootstrap progress bar with custom color

问题描述

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

$('#pb').css({'背景图像':'无'，背景颜色":红色"});

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

解决方案

使用 Bootstrap 3.2.0，您可以执行以下操作:

$(function() {$("#one").addClass("progress-bar-purple");$("#two").addClass("progress-bar-orange");});

.progress-bar-purple {背景颜色:紫色！重要；}.progress-bar-orange {背景颜色:橙色！重要；}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></脚本><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 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%

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

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

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

解决方案

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

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

这篇关于如何使用自定义颜色更改引导程序进度条的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！