javascript - bootstrap vue progress 的独立颜色

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>