Làm cách nào để thay đổi màu của thanh tiến trình bootstrap bằng màu tùy chỉnh

Question

Làm cách nào để thay đổi màu của thanh tiến trình khởi động mà không làm mất văn bản? Tôi đã thấy câu trả lời này;

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

từ here

nó hoạt động, nhưng tôi đã làm mất văn bản trong thanh tiến trình!

Trợ giúp Gát

Answer 1

Sử dụng Bootstrap 3.2.0, bạn có thể làm điều gì đó như sau:

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

Answer 2

Nếu bạn đang sử dụng sass bootstrap, nó có một mixin rằng bạn có thể bao gồm như sau:

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

Answer 3

đơn giản nhất điều bạn có thể làm là ...

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

đề cập đến style = "width: 10%; ! Background-color: red quan trọng;" cơ bản dở dang-bar div

đặt bất kỳ màu sắc thay vì màu đỏ ...