html - 更改 Bootstrap 进度条背景(不是进度条,而是条形背景)

标签 html css twitter-bootstrap background progress-bar

目前我正在使用 Bootstrap 进度条

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

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

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

最佳答案

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

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

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

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

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

关于html - 更改 Bootstrap 进度条背景(不是进度条,而是条形背景),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23140484/

相关文章:

html - 如何在CSS中对齐表格

html - 如何使响应式两个内联 block div

css - 组插件在 Bootstrap 表中占用太多空间

css - 高度100和iframe =两个滚动条

php - 宽度属性不适用于绝对定位的 div

html - 如何在css上对齐图像?

javascript - 如何使事件页面在右侧有边框?

html - 引导面板中的表格将分界线从粗到细

javascript - 使用jquery制作不是父子div的相等高度?

html - 为什么我的 Bootstrap 响应表不缩小