Question

我正在使用Bootstrap 4 alpha。如何自定义（例如：删除border-radius，更改条形基色，填充颜色等...）？

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

http://camel.apache.org/cxfrs.html

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 ..

修改

我还创建了要在Firefox中显示的plunker，请查看此

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>

我将自定义类progress-custom添加到Object并为其定义了一些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\0) {
  .progress-custom .progress-bar {
    background-color: #FE6502;
  }
}

这些额外的CSS将改变进度部分的颜色。我也测试了border-radius，也可以将它改为你想要的任何东西。

我刚刚测试得非常快：Chrome和Firefox受到了这些变化的影响，IE的颜色正确，但边框半径不起作用。

Bootstrap 4 - 自定义进度条

2 个答案: