twitter-bootstrap 更改引导程序进度条背景(不是进度条,而是进度条背景)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23140484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:31:52  来源:igfitidea点击:

change bootstrap progress bar background (not the bar, but the bars Background)

htmlcsstwitter-bootstrapbackgroundprogress-bar

提问by user3506938

Currently I am using a bootstrap progress bar

目前我正在使用引导进度条

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
 </div>
</div>

the default color of the bar is blue, I have managed to change this.

栏的默认颜色是蓝色,我已经设法改变了这一点。

However, the default background of the not filled in part is white with grey radients, how can i change this to my own colour?

但是,未填充部分的默认背景是带有灰色辐射的白色,我该如何将其更改为我自己的颜色?

回答by Hupfen

You just need to overwrite the values on .progress with your own CSS.

你只需要用你自己的 CSS 覆盖 .progress 上的值。

.progress {
  background-color: #aaa;
  -webkit-box-shadow: none;
  box-shadow: none;
}

That will remove the shadow on the remainder of the progress bar, and change it to (in this case) a mild gray. You can pick whatever color value you'd like there.

这将移除进度条其余部分的阴影,并将其更改为(在本例中)浅灰色。您可以在那里选择您喜欢的任何颜色值。

That can go in the HTML itself (not generally preferred), or in your own CSS file (just make sure it's included after the Bootstrap CSS).

这可以放在 HTML 本身(通常不是首选)或您自己的 CSS 文件中(只需确保它包含在 Bootstrap CSS 之后)。

(A quick Plunkr to illustrate: http://plnkr.co/edit/WUDuq5XayN0nXEmtXY6V)

(一个快速的 Plunkr 来说明:http://plnkr.co/edit/WUDuq5XayN0nXEmtXY6V )

回答by Andre Shen

You just need to put background color on progress to surround the bar:

您只需要在进度条上添加背景颜色以包围该条:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress bg-warning">
 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
 </div>
</div>

回答by Abdullah Khan Niazi

You can simply do this. either inline or in separate css file.

你可以简单地做到这一点。内联或单独的 css 文件。

 <div class="progress" style="height:20px; border-radius: 0; background-color: #ffaab2;">
      <div class="progress-bar" style="width:80%;height:20px; background-color: #ff5262">
      </div>
    </div>