Question

是否有可能将进度条的颜色更改为hex中指定的任何值？

变体的颜色（例如“成功”，“危险”）不符合我们的规格，因此我需要为进度指定自己的颜色，例如：#01A688。

我已经尝试通过css进行管理，但是没有成功。

谢谢您的帮助。

Answer 1

您需要做的就是提供一个针对进度条背景颜色的更具体的规则。

body{padding: 4rem;}

.progress .progress-bar{background: #01A688;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Answer 2

如果您使用的是bootstrap-vue，我想您也可以这样做：

<b-progress class="">
    <b-progress-bar :style="{ 'background-color': '#01A688' }" :value="25"></b-progress-bar>
</b-progress>

Answer 3

我将.progress-bar样式放置在全局CSS中（而不是范围内的样式），并且它起作用了。更具体地说，我将以下内容放在_style.css中：

.progress-bar {
  background-color: yellow;
}

引导Vue进度的单独颜色

3 个答案: