1

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;
}
4

2 に答える 2

1

同様の問題がありましたが、進行部分の色を変更したかっただけです。

私の進行状況バーは次のとおりです。

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

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\0) {
  .progress-custom .progress-bar {
    background-color: #FE6502;
  }
}

これらの追加 CSS は進行部分の色を変更します。また、border-radius でテストしましたが、これを好きなように変更することもできます。

非常に簡単にテストしました。Chrome と Firefox は変更の影響を受け、IE の色は適切でしたが、border-radius は機能しませんでした。

于 2016-07-21T08:57:54.550 に答える