부트스트랩 vue 진행률의 개별 색상

부트스트랩 vue 진행률의 개별 색상

진행 표시줄의 색상을 에서 지정한 값으로 변경할 수 있습니까?hex?

변종 색상(예: '성공', '위험')이 당사의 사양을 충족하지 못하기 때문에 다음과 같이 진행하려면 고유한 색상을 지정해야 합니다.#01A688.

나는 이미 그것을 통해 관리하려고 했다.css하지만 성공하지 못했다.

잘 부탁드립니다.

진행률 표시줄의 배경색을 대상으로 하는 보다 구체적인 규칙을 지정하기만 하면 됩니다.

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>

bootstrap-vue를 사용하는 경우 다음 작업도 수행할 수 있습니다.

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

글로벌 CSS에 .progress-bar 스타일링을 넣었는데(스코프가 아닌) 동작했습니다.구체적으로는 _style.css에 다음 내용을 넣었습니다.

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

언급URL : https://stackoverflow.com/questions/52403770/individual-color-for-bootstrap-vue-progress