Twitterのブートストラップ進行状況バーの色を変更

Question

Twitterのブートストラップを見ています。私はプログレスバーの色を変更しようとしていますが、バーを実際に表示することはできません。

私のコードは次のようになっています。何が間違っているのか分かりませんし、すべてを試しました。多分それは私が

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

HTML

<div class="progress"> 
    <div class="bar" style="width: 60%;"></div> 
</div> 

CSS

.bar { 
    background-color: green; 
} 

Answer 1

を使用していますが、100%に.bar要素のheightを設定する必要があり、ブートストラップのバージョンでありますそれ以外の場合は、高さは0になります（コンテンツはありません）。

.bar { 
 
    background-color: green; 
 
    height: 100%; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="progress"> 
 
    <div class="bar" style="width: 60%;"></div> 
 
</div>

Answer 2

あなたがバー自身のために右のCSSクラスを使用していない表示されます。 「バー」の代わりに「プログレスバー」クラスを使用してみてください。たとえば、次のように

HTML

<div class="progress"> 
 
    <div class="progress-bar" style="width: 60%;"></div> 
 
</div>

CSS

.progress-bar { 
 
    background-color: green; 
 
}

このリファレンスを参照してください： http://getbootstrap.com/components/#progress