我如何在不丢失文本的情况下更改Bootstrap进度条的颜色?我看到了这个答案:
$('#pb').css({
'background-image': 'none',
'background-color': 'red'
});
它可以工作,但是我会失去进度条中的任何文字。
我如何在不丢失文本的情况下更改Bootstrap进度条的颜色?我看到了这个答案:
$('#pb').css({
'background-image': 'none',
'background-color': 'red'
});
它可以工作,但是我会失去进度条中的任何文字。
使用 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>
你能做的最简单的事情就是...
<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>
在进度条(div)中提及样式(style="width:10%; background-color:red !important;")
可以将红色替换为任何颜色...
这两行代码直接来自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;
}
只需在 HTML 中使用这些代码,在<style></style>
之间或在加载 bootstrap.css 之后加载的 CSS 文件中使用。
.progress {
@include progress-bar-variant(#000);
}
有可能在提问的那一年,Bootstrap版本已经不同了。但是现在你可以使用Bootstrap的类来更改颜色。
.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>