부트 스트랩, CSS, 진행률 표시 줄

Question

진행률 표시 줄이 작동하지 않는 이유를 모르겠습니다. 부트 스트랩에 대한 CSS 옵션이 잘못되었다고 생각합니다. 문제가있는 곳을 찾기 위해 옵션을 변경하려했지만 성공하지 못했습니다.

보기

.progress { 
    overflow: hidden; 
    height: 18px; 
    margin-bottom: 18px; 
    background-color: #f7f7f7; 
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); 
    background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); 
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); 
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); 
    background-image: linear-gradient(top, #f5f5f5, #f9f9f9); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); 
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
.progress .bar { 
    width: 0%; 
    height: 18px; 
    color: #ffffff; 
    font-size: 12px; 
    text-align: center; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    background-color: #0e90d2; 
    background-image: -moz-linear-gradient(top, #149bdf, #0480be); 
    background-image: -ms-linear-gradient(top, #149bdf, #0480be); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); 
    background-image: -webkit-linear-gradient(top, #149bdf, #0480be); 
    background-image: -o-linear-gradient(top, #149bdf, #0480be); 
    background-image: linear-gradient(top, #149bdf, #0480be); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: width 0.6s ease; 
    -moz-transition: width 0.6s ease; 
    -ms-transition: width 0.6s ease; 
    -o-transition: width 0.6s ease; 
    transition: width 0.6s ease; 
} 
.progress-striped .bar { 
    background-color: #62c462; 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    -webkit-background-size: 40px 40px; 
    -moz-background-size: 40px 40px; 
    -o-background-size: 40px 40px; 
    background-size: 40px 40px; 
} 
.progress.active .bar { 
    -webkit-animation: progress-bar-stripes 2s linear infinite; 
    -moz-animation: progress-bar-stripes 2s linear infinite; 
    animation: progress-bar-stripes 2s linear infinite; 
} 
.progress-success .bar { 
    background-color: #5eb95e; 
    background-image: -moz-linear-gradient(top, #62c462, #57a957); 
    background-image: -ms-linear-gradient(top, #62c462, #57a957); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); 
    background-image: -webkit-linear-gradient(top, #62c462, #57a957); 
    background-image: -o-linear-gradient(top, #62c462, #57a957); 
    background-image: linear-gradient(top, #62c462, #57a957); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); 
} 
.progress-success.progress-striped .bar { 
    background-color: #62c462; 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
} 

Answer 1

귀하의 코드가 잘 보이는

<div class="progress progress-success progress-striped"> 
<div class="bar" style="width:20%"></div> 
</div> 

CSS는 - 그러나, 진행 표시 줄 '직장'을 만들기 위해 당신은 또한 width에 대한 인라인 스타일에 대한 업데이트를 지정해야합니다.

이렇게하는 방법에는 여러 가지가 있지만 페이지 또는 페이지 환경에 가장 잘 맞는 방법을 선택해야합니다. 예를 들어, 설문 조사에서와 마찬가지로 5 페이지가있을 수 있습니다. 진행률 표시 줄은 각 페이지의 영구 요소입니다. 각 페이지를 만들 때, 당신은 다음과 같이 폭 아마도 뭔가를 인라인 스타일을 변경하기를 원할 것입니다 :

<div class="bar" style="width:20%"></div> 
<div class="bar" style="width:40%"></div> 
<div class="bar" style="width:60%"></div> 
<div class="bar" style="width:80%"></div> 
<div class="bar" style="width:100%"></div> 

그렇게, 진행 바의 시각화가 업데이트됩니다 않기 때문에. 단일 페이지와 여러 페이지에서이 작업을 수행하는 방법은 여러 가지가 있지만 위의 내용은 한 가지 예일뿐입니다.

http://jsfiddle.net/dusthaines/jjdTt/