如何更改自定义颜色的引导程序进度栏的颜色

如何更改引导程序进度栏的颜色而不丢失文本？我看到过这个答案;如何更改自定义颜色的引导程序进度栏的颜色

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

从here

它的工作原理，但我在进度条输的文字！

帮助迦特

来源

2014-10-06 gath

什么版本的流Twitter的引导你用在V3.2.0没有背景图片了吗？，所以你只需要改变背景颜色。你有一个小提琴，看看文字是如何消失？ – Caelea 2014-10-06 15:56:13

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

来源

2014-10-06 20:30:59 mccannf

如果使用的是引导SASS，它有一个mixin是你可以像这样包括：

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

来源

2015-12-17 12:07:47 rolando

最简单的事情你可以做的是...

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

提的风格=“宽度：10％; ！背景颜色：红色重要，”在进度条格

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

来源

2018-01-01 17:47:26 trex1999

如何更改自定义颜色的引导程序进度栏的颜色

回答

相关问题