Bootstrap 4 - 自定义进度条

Question

我正在使用 Bootstrap 4 alpha。我如何自定义（例如：删除边框半径、更改栏底色、填充颜色等...）？

尝试使用以下代码..但它不起作用:(

HTML

<div class="b4-test">
  <progress class="progress" value="75" max="100">75%</progress>
</div>

CSS

.b4-test{
  padding:50px;
  width:500px;
  margin:50px auto;
  text-align:center;
  background:#ccc;
}

progress{
  border-radius:0 !important;
  background-image:none !important;
  background-color:red !important;
  color:green !important;
  height:50px;
}

Answer 1

在 Firefox

中查看此代码段

此代码段仅适用于 Firefox..

编辑

我还创建了 plunker 以在 Firefox 中显示，请查看此内容

Firefox Plunker

.b4-test {
  padding: 50px;
  width: 500px;
  margin: 50px auto;
  text-align: center;
  background: #ccc;
}
.progress[value] {
  border-radius: 0;
  background-color: red;
}
.progress[value]::-moz-progress-bar {
  background-color: green;
}

<div class="b4-test">
  <progress class="progress" value="75" max="100">75%</progress>
</div>

对于Chrome检查下面的plunker

检查这个Chrome Plunker

Answer 2

有类似的问题，但我只是想改变进度部分的颜色。

我的进度条是这样的：

<progress class="progress progress-custom" value="25" max="100">25%</progress>

我向对象添加了自定义 class progress-custom 并为其定义了一些 CSS。

.progress-custom[value]::-webkit-progress-value {
  background-color: #FE6502;
}

.progress-custom[value]::-moz-progress-bar {
  background-color: #FE6502;
}

.progress-custom[value]::-ms-fill {
  background-color: #FE6502;
}

@media screen and (min-width: 0[=11=]) {
  .progress-custom .progress-bar {
    background-color: #FE6502;
  }
}

这些额外的CSS会改变进度部分的颜色。我还测试了 border-radius ，也可以将其更改为您想要的任何内容。

我很快就测试了它：Chrome 和 Firefox 都受到了这些变化的影响，IE 有正确的颜色，但是 border-radius 不起作用。

Bootstrap 4 - 自定义进度条

Bootstrap 4 - Customize Progress Bar

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4