如何更改自定義顏色的引導程序進度欄的顏色

如何更改引導程序進度欄的顏色而不丟失文本？我看到過這個答案;如何更改自定義顏色的引導程序進度欄的顏色

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

如何更改自定義顏色的引導程序進度欄的顏色

回答

相關問題